Créer des bulles de discours sur la page avec Popper.js

Tout le monde connaît les infobulles et il existe des dizaines de ressources gratuites pour vous aider à les réaliser. Cependant, les bulles de message personnalisées ou «poppers» sont également très utiles.

Ils ne sont pas limités aux événements de survol, ils peuvent donc apparaître sur la page de manière cohérente et contourner les autres comportements des utilisateurs.

Si vous cherchez à créer ces poppers bulle sur votre site, alors Popper.js est le meilleur choix. C'est un plugin open-source gratuit, hébergé sur le site officiel de js.org.

Vous trouverez ces conseils de bulle dans beaucoup de sites Web qui ont des interfaces complexes. Parfois, ils offrent des conseils rapides, des procédures pas à pas et des conseils d'intégration pour les nouveaux utilisateurs de l'interface.

Avec Popper.js, vous n'avez pas besoin d'attendre que l'utilisateur pointe juste pour créer une info-bulle. Au lieu de cela, vous pouvez forcer un popper à apparaître n'importe où, n'importe quelle taille, n'importe quelle couleur, avec un positionnement dynamique .

Consultez la page de démonstration Popper.js pour voir ce que je veux dire. Il est livré avec un large éventail de fonctionnalités de positionnement qui vous permettent d'inverser automatiquement la position du popper en fonction de l'emplacement de l'écran.

Lorsque l'utilisateur fait défiler la page, il risque de perdre la bulle de popper. Avec ce plugin, vous pouvez le forcer à revenir en vue en le faisant basculer vers le haut (ou vers le bas), en fonction du sens de défilement de l'utilisateur.

Vous avez un contrôle total sur les limites, les positions des flèches, les couleurs des infobulles et bien plus encore. Sans parler de ce plugin est magnifique et entièrement extensible si vous voulez ajouter vos propres fonctionnalités dans le mélange.

Tout le code source est disponible gratuitement sur GitHub si vous voulez le vérifier.

Pour commencer, jetez un oeil à la page de documentation pour un guide complet. Cela vous indique les scripts dont vous aurez besoin, comment configurer un popper personnalisé et comment configurer les différentes options de viewport. Bien que, la meilleure ressource est la page principale Popper.js, avec des démos à gogo et beaucoup d'échantillons de code.

Si vous voulez en savoir plus sur le développement consultez ce blog écrit par le créateur Federico Zivolo.