Cree burbujas de voz en la página con Popper.js

Todo el mundo conoce información sobre herramientas y hay docenas de recursos gratuitos para ayudarlo a realizarlos. Sin embargo, las burbujas de mensaje personalizado o "poppers" también son muy útiles.

No se limitan a los eventos de desplazamiento, por lo que pueden aparecer en la página de manera consistente y solucionar otros comportamientos de los usuarios.

Si está buscando crear estos poppers de burbujas de diálogo en su sitio, entonces Popper.js es la mejor opción. Es un complemento gratuito de código abierto alojado en el sitio web oficial de js.org.

Encontrará estos consejos sobre burbujas en muchos sitios web que tienen interfaces complejas. A veces ofrecerán consejos rápidos, tutoriales y consejos de incorporación para las personas nuevas en la interfaz.

Con Popper.js, no necesita esperar a que el usuario pase el mouse para crear una información sobre herramientas. En su lugar, puede obligar a un popper a aparecer en cualquier lugar, cualquier tamaño, cualquier color, con posicionamiento dinámico .

Mira la página de demostración de Popper.js para ver a qué me refiero. Viene con una amplia gama de funciones de posicionamiento que le permiten voltear automáticamente la posición del popper en función de la ubicación de la pantalla.

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

Usted tiene control total sobre los límites, las posiciones de las flechas, los colores de información sobre herramientas y mucho más. Sin mencionar que este complemento es magnífico y totalmente extensible si deseas agregar tus propias características a la mezcla.

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

Para comenzar, eche un vistazo a la página de documentación para obtener una guía completa. Esto le indica qué scripts necesitará, cómo configurar un popper personalizado y cómo configurar las diferentes opciones de visualización. Aunque, el mejor recurso es la página principal Popper.js, con demostraciones en abundancia y muchas muestras de código.

Si desea leer más sobre desarrollo, consulte esta publicación de blog escrita por el creador Federico Zivolo.