Infobulles en javascript – Popper.js

Popper.js permet de créer très facilement des infobulles, avec l’aide de javascript, dans vos page web. La gestion d’infobulle, selon l’auteur du site Popper.js, peut s’avérer difficile à mettre en oeuvre. C’est pour cette raison qu’il a créé Popper.js, qui devrait devenir votre nouveau meilleur ami!

infobulles - popper.js

Popper.js est livré avec  un ensemble d’options pour répondre à tous vos besoins. Et, si vous n’aviez pas entière satisfaction, Popper.js supporte les plugins pour étendre ses fonctionnalités. Ce système est appelé « Modifiers ».

Principales caractéristique des infobulles Popper.js :

  • Placements : Vous décidez où l’infobulle va s’afficher, entre les quatre côtés de votre élément de référence et vous choisissez le décalage sur le début ou à la fin de celui-ci.
  • Limites personnalisées : Impossible de perdre vos infobulles! Donnez-leur quelques limites pour vous assurer qu’ils resteront là où vous l’avez décidé.
  • Retourner et Déplacer : Que faire si votre infobulle atteint les limite de la page? Disparaitre, changer côté, etc. ? C’est à vous de décider.
  • Flèches : Les infobulles ont en générale des flèches. Un soin particulier a été apporté à cet aspect et l’auteur fait en sorte que les flèches restent à la bonne place: entre l’infobulle et élément de référence.
  • Fixe ou absolue? : Il existe une détection automatiquement lorsque votre infobulle doit être en position « fixe » ou « absolue ».
  • Accélération GPU : Si l’accélération GPU est prise en charge par votre navigateur, les infobulles seront positionnées en utilisant le CSS translate3d, ce qui affiche vos infobulles encore plus rapidement.
  • Décalages : Lorsque vous avez besoin de précision chirurgicale sur la position de votre infobulle, définissez un décalage au pixel.
  • « Modifiers » :  Ce système de plugin vous permet d’ajouter tout type de fonctionnalité pour Popper.js. La plupart des comportements intégrés sont écrits en tant que « modifiers ».

Enfin, Popper.js, c’est approximativement 3,5 kb minifiés et gzippés, et sans aucune dépendance!

Site Internet : Popper.js
Licence : MIT

Leave a Reply