Tippy.js - Lightweight Vanilla Javascript Tooltip Library

La información sobre herramientas es útil para mostrar pequeños fragmentos de contenido adicional. Ahorran espacio en la página y te dan un espacio para animar algo que atrae la atención de las personas..

En el pasado, hemos cubierto los scripts de información sobre herramientas, pero muchos desarrolladores quieren bibliotecas personalizadas. Algunos prefieren jQuery, otros quieren simple JS de vainilla.

El plugin Tippy funciona mejor para este último grupo Quien quiera trabajar con el código JS de vainilla..

Con Tippy.js obtienes un biblioteca de información sobre herramientas totalmente funcional corriendo en la parte superior de Popper.js. Esto significa que el complemento viene con una pequeña dependencia, pero es mucho más fácil de administrar que la biblioteca jQuery.

Entonces, ¿cuál es la belleza de Tippy? Se agrega a los estilos Popper predeterminados para crear información sobre herramientas más dinámica con efectos increíbles.

Puede agregar desvanecimientos, diapositivas, distorsiones, duraciones personalizadas, métodos de devolución de llamada e incluso efectos dinámicos como información sobre herramientas de rotación automática.

Realmente, este complemento llevará las informaciones sobre herramientas a un nivel completamente nuevo con funciones de usabilidad bien definidas. Puedes mantener Información sobre herramientas fija a la pantalla con ciertos elementos de página, o haz que cambien de orientación si la pantalla se vuelve muy pequeña.

También es compatible con dispositivos táctiles, lo que lo hace perfecto para diseños sensibles. La información sobre herramientas HTML está etiquetada usando los estándares ARIA para la máxima accesibilidad. No puedo pensar en nada malo que decir sobre este plugin.!

Si desea probar esto en su propio sitio, simplemente descargue una copia del código fuente de GitHub. Esto incluye los archivos principales del complemento junto con detalles sobre cómo instalarlo usando npm.

El archivo de script Tippy.js predeterminado viene con Popper.js incluido, por lo que ni siquiera necesita descargar esa biblioteca adicional. Todo lo que necesita es el archivo JS / CSS predeterminado y una página web para ejecutar información sobre herramientas..

Si desea profundizar en algunos ejemplos, eche un vistazo a la página de inicio de Tippy.js que incluye muestras en vivo + fragmentos de código que puede copiar y reutilizar.