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

Tout le monde sait à propos de infobulles et il existe des dizaines de ressources gratuites pour vous aider à les fabriquer. toutefois, bulles de message personnalisées ou “poppers” sont également très utiles.

Ils ne sont pas limités aux événements de vol stationnaire, afin qu'ils puissent apparaître sur la page de manière cohérente et contourner les autres comportements des utilisateurs.

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

Vous trouverez ces conseils de bulle dans de nombreux sites Web dotés d'interfaces complexes. Parfois, ils vont offrir Astuces rapides, procédures pas à pas, et conseils d'intégration pour les nouveaux venus à l'interface.

Avec Popper.js, vous n'avez pas besoin d'attendre que l'utilisateur survole 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 positionnement dynamique.

Consultez la page de démonstration de Popper.js pour voir ce que je veux dire. Il vient 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 contextuelle. Avec ce plugin, vous pouvez forcer à la vue en le tournant (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 info-bulles et bien plus encore. Sans oublier que ce plugin est magnifique et totalement extensible si vous voulez ajouter vos propres fonctionnalités dans le mix.

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

Pour commencer, jetez un coup d’œil à 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 visualisation. Bien que la meilleure ressource reste le 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.