Cómo usar createPopper para crear popups en Popper.js
¿Qué es createPopper en Popper.js?
createPopper es la función que inicializa una nueva instancia de Popper.js y controla la posición del popup en tiempo real. Se encarga de calcular automáticamente el mejor lugar para mostrar el popper (como tooltips o menús desplegables) en función de su referencia y del espacio disponible en la ventana.
Ejemplo básico de uso de createPopper
// Elementos de referencia y popper
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
// Crear el popper usando el botón como referencia
const popperInstance = Popper.createPopper(button, tooltip, {
placement: 'bottom', // Posición del popper en relación al botón
});
En este ejemplo, el tooltip (popup) se posiciona automáticamente debajo del button. Si no hay espacio suficiente en la parte inferior, Popper.js lo ajustará a la mejor ubicación disponible.
Opciones comunes de createPopper
1. Placement: Define la posición inicial del popup (por ejemplo, top, bottom, left, right).
Popper.createPopper(button, tooltip, {
placement: 'top',
});
2. Modifiers: Son ajustes adicionales para modificar el comportamiento del popup, como offset (desplazamiento), flip (cambiar de dirección si no hay espacio suficiente) y preventOverflow (evitar que el popup se salga de la pantalla).
Popper.createPopper(button, tooltip, {
modifiers: [
{ name: 'offset', options: { offset: [0, 8] } }, // Desplazar el popup 8px hacia abajo
{ name: 'flip', options: { fallbackPlacements: ['top', 'left'] } }, // Cambia la dirección si no hay espacio
],
});Escenario común: popup dinámico en un clic
Imagina que quieres mostrar un tooltip cuando un usuario hace clic en un botón y asegurarte de que el tooltip se posicione correctamente en función del espacio disponible:
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
// Al hacer clic, mostrar y posicionar el popup
button.addEventListener('click', () => {
Popper.createPopper(button, tooltip, {
placement: 'bottom',
});
tooltip.style.display = 'block'; // Mostrar el tooltip
});
Ventajas de createPopper
- Precisión automática: Popper.js se encarga de posicionar el popup de forma precisa.
- Soporte para ventanas dinámicas: Ajusta automáticamente la posición del popup si cambia el tamaño de la ventana.
- Modificable y flexible: A través de modifiers, puedes personalizar el comportamiento del popup fácilmente.
Referencia oficial
Para más detalles sobre createPopper, consulta la documentación oficial de Popper.js.
Jorge García
Fullstack developer