Popper.js: Tutorial Completo para Posicionar Tooltips en Tu Web
Popper.js es una biblioteca JavaScript de vanguardia que simplifica el proceso de posicionar elementos en la página web, como tooltips y popovers, con precisión y flexibilidad. En este tutorial exhaustivo, te guiaremos paso a paso a través de la implementación de Popper.js, comenzando con los fundamentos básicos y adentrándonos en técnicas avanzadas para personalizar el comportamiento de tus tooltips.
Fundamentos de Popper.js: Una Introducción
Imagine un tooltip que aparece junto a un botón, o una ventana emergente que se posiciona perfectamente al lado de un elemento. Popper.js facilita la creación de estos elementos interactivos, encargándose de la colocación y el posicionamiento de forma dinámica, incluso mientras el usuario interactúa con la página.
Instalación y Configuración Inicial
Para comenzar con Popper.js, puedes incorporarlo a tu proyecto de dos maneras:
-
CDN: La forma más rápida es incluir el archivo de Popper.js desde un CDN. Agrega el siguiente código dentro de la etiqueta
<head>de tu HTML:«`html
«`
-
NPM: Si prefieres usar npm o yarn, instala la biblioteca con el comando:
bash
npm install @popperjs/core
Creando un Tooltip Básico
Empecemos con un ejemplo básico para visualizar un tooltip junto a un botón.
-
HTML: Define un botón y un tooltip con la estructura básica:
«`html
Este es un tooltip.«`
-
CSS: Estiliza el tooltip para darle forma y apariencia atractiva:
«`css
.tooltip {
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
visibility: hidden;
}.tooltip::before {
content: »;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(5px);
border-width: 5px;
border-style: solid;
border-color: transparent transparent #ccc transparent;
}
«` -
JavaScript: Incorpora la lógica para mostrar y ocultar el tooltip:
«`javascript
const button = document.getElementById(‘myButton’);
const tooltip = document.getElementById(‘myTooltip’);button.addEventListener(‘mouseenter’, () => {
tooltip.style.visibility = ‘visible’;
});button.addEventListener(‘mouseleave’, () => {
tooltip.style.visibility = ‘hidden’;
});
«`
En este ejemplo, el tooltip se hace visible cuando el usuario coloca el ratón sobre el botón y desaparece al retirar el ratón.
Conectando Popper.js a Nuestro Tooltip
Ahora vamos a utilizar Popper.js para posicionar correctamente el tooltip con respecto al botón.
-
Inicializando Popper.js: Importa la función
createPopperde Popper.js y crea una instancia de Popper:«`javascript
import { createPopper } from ‘@popperjs/core’;const popperInstance = createPopper(button, tooltip, {
placement: ‘top’,
});
«`En este código,
createPopperrecibe como argumentos el elemento de referencia (el botón) y el elemento a posicionar (el tooltip). El parámetroplacementdefine la posición inicial del tooltip relativa al botón (top,bottom,left,right, etc.). -
Actualizando el comportamiento del tooltip: Modifica el código JavaScript para utilizar Popper.js para manejar la visibilidad y la posición del tooltip:
«`javascript
button.addEventListener(‘mouseenter’, () => {
popperInstance.update(); // Actualiza la posición del tooltip
tooltip.style.visibility = ‘visible’;
});button.addEventListener(‘mouseleave’, () => {
tooltip.style.visibility = ‘hidden’;
});
«`Ahora, al colocar el ratón sobre el botón, la instancia de Popper actualizará la posición del tooltip de forma dinámica, asegurando que se sitúe correctamente con respecto al botón.
Personalizando la Posición del Tooltip con Popper.js
Popper.js ofrece una gran flexibilidad para personalizar la posición del tooltip. Aquí exploramos las opciones más útiles:
Modificadores
Popper.js permite aplicar modificadores para ajustar la posición del tooltip con respecto a su referencia.
flip: Si el tooltip no cabe en la posición especificada porplacement, este modificador lo voltea al lado opuesto (por ejemplo, detopabottom).shift: Si el tooltip se sale de la pantalla, este modificador lo desplaza ligeramente hacia dentro de la página.offset: Este modificador añade un espacio adicional entre el tooltip y su referencia.
Ejemplo de uso:
javascript
const popperInstance = createPopper(button, tooltip, {
placement: 'top',
modifiers: [
{ name: 'flip' },
{ name: 'shift', options: { padding: 10 } },
{ name: 'offset', options: { offset: [0, 10] } } // Añade un espacio de 10px hacia abajo
]
});
Eventos de Popper.js
Para un control más preciso, Popper.js proporciona eventos que permiten responder a cambios en la posición del tooltip:
update: Se dispara cuando se actualiza la posición del tooltip.created: Se dispara cuando se crea la instancia de Popper.destroyed: Se dispara cuando se destruye la instancia de Popper.
Ejemplo de uso:
javascript
popperInstance.on('update', () => {
console.log('Tooltip actualizado');
});
Utilizando Popper.js con Popovers
Popper.js también funciona perfectamente con popovers, que son ventanas emergentes más grandes que los tooltips.
-
Estructura HTML: Crea un popover con la estructura básica:
«`html
Este es un popover.«`
-
CSS: Estiliza el popover:
css
.popover {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
visibility: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
-
JavaScript: Inicializa Popper.js para el popover:
«`javascript
const popoverButton = document.getElementById(‘myPopoverButton’);
const popover = document.getElementById(‘myPopover’);const popperInstance = createPopper(popoverButton, popover, {
placement: ‘bottom’,
});popoverButton.addEventListener(‘click’, () => {
popperInstance.update();
popover.style.visibility = ‘visible’;
});popover.addEventListener(‘click’, (event) => {
// Si se hace clic fuera del popover
if (event.target === popover) {
popover.style.visibility = ‘hidden’;
}
});
«`
Conclusión: Dominando la Posición de Elementos Web
Popper.js es una herramienta esencial para desarrolladores web que desean crear elementos interactivos con un posicionamiento preciso y flexible. En este tutorial, hemos explorado los fundamentos de Popper.js, desde la configuración inicial hasta la personalización avanzada de la posición de tooltips y popovers. Recuerda que Popper.js ofrece una amplia gama de opciones para adaptarla a tus necesidades específicas, asegurando un posicionamiento perfecto en cualquier contexto.