Crea burbujas de discurso en la página con Popper.js

Todos saben acerca de información sobre herramientas y hay docenas de recursos gratuitos para ayudarte a hacerlos. sin embargo, mensaje personalizado burbujas o “poppers” también son muy útiles.

Ellos no se limitan a eventos de hover, para que puedan aparecer en la página de forma coherente y evitar los comportamientos de otros usuarios.

Si estas buscando crear estos burbujas de discurso en tu sitio entonces Popper.js Es la mejor opción. Es un complemento gratuito de código abierto, alojado en el sitio web oficial js.org.

Encontrará estos consejos de burbuja en muchos sitios web que tienen interfaces complejas. A veces ellos ofrecen consejos rápidos, recorridos, y consejo de abordaje para personas nuevas en la interfaz.

Con Popper.js, no es necesario esperar a que el usuario se desplace para crear una información sobre herramientas. En su lugar, puedes forzar a un popper a aparecer en cualquier lugar, cualquier tamaño, cualquier color, con posicionamiento dinámico.

Echa un vistazo a la página de demostración de Popper.js para ver a qué me refiero. Viene con un amplia gama de características de posicionamiento que le permiten cambiar automáticamente la posición del popper según la ubicación de la pantalla.

A medida que el usuario se desplaza por la página, puede perder la burbuja emergente. Con este plugin, puedes forzarlo de nuevo a la vista girándolo hacia arriba (o hacia abajo), dependiendo de la dirección de desplazamiento del usuario.

Tienes control total sobre los límites, las posiciones de las flechas, los colores de la información sobre herramientas y mucho más. Sin mencionar que este plugin es precioso y totalmente extensible Si quieres agregar tus propias características a la mezcla..

Todo el código fuente está disponible de forma gratuita en GitHub si quieres comprobarlo.

Para empezar, eche un vistazo a la página de documentación para una guía completa. Esto le indica qué scripts necesitará, cómo configurar un popper personalizado y cómo configurar las diferentes opciones de la ventana gráfica. Aunque, el mejor recurso es el Página principal de popper.js, con demostraciones en abundancia y un montón de ejemplos de código.

Si quieres leer más sobre el desarrollo, echa un vistazo a esta publicación de blog escrita por el creador Federico Zivolo.