Tippy.js - Bibliothèque d'info-bulles Javascript légère à la vanille

Les info-bulles sont utiles pour afficher des petits morceaux de contenu supplémentaire. Ils économisent de l'espace sur la page et vous donnent une salle pour animer quelque chose qui attire l'attention des gens.

Dans le passé, nous avons traité les scripts d’infos, mais de nombreux développeurs souhaitent des bibliothèques personnalisées. Certains préfèrent jQuery, d’autres veulent de la vanille simple JS.

Le plugin Tippy fonctionne mieux pour ce dernier groupe qui veulent travailler avec le code JS vanille.

Avec Tippy.js vous obtenez un bibliothèque d'infobulles entièrement fonctionnelle en cours d'exécution sur Popper.js. Cela signifie que le plugin est livré avec une petite dépendance, mais qu'il est beaucoup plus facile à gérer que la bibliothèque jQuery.

Alors, quelle est la beauté de Tippy? Il ajoute aux styles Popper par défaut pour créer info-bulles plus dynamiques avec des effets incroyables.

Vous pouvez ajouter des fondus, des diapositives, des agitations, des durées personnalisées, des méthodes de rappel et même des effets dynamiques tels que des info-bulles à rotation automatique..

Vraiment ce plugin va amener vos info-bulles à un tout autre niveau avec des fonctionnalités d’utilisabilité bien définies. Tu peux garder info-bulles fixées à l'écran avec certains éléments de page, ou demandez-leur de changer d'orientation si l'écran devient trop petit.

Il prend également en charge les appareils tactiles, ce qui le rend idéal pour les mises en page réactives. L'info-bulle HTML est étiquetée à l'aide des normes ARIA pour une accessibilité maximale. Je ne peux rien dire de mal à propos de ce plugin!

Si vous voulez essayer ceci sur votre propre site, téléchargez simplement une copie du code source de GitHub. Cela inclut les fichiers du plugin principal ainsi que des détails sur son installation à l'aide de npm.

Le fichier de script par défaut Tippy.js est fourni avec Popper.js, vous n'avez donc pas besoin de télécharger cette bibliothèque supplémentaire. Tout ce dont vous avez besoin est le fichier JS / CSS par défaut et une page Web pour exécuter les info-bulles..

Si vous souhaitez approfondir certains exemples, jetez un coup d'œil à la page d'accueil de Tippy.js, qui inclut des échantillons en direct et des extraits de code que vous pouvez copier et réutiliser..