Tooltipster est un plugin jQuery qui permet de mettre en place des tooltip (infobulles), au hover sur n’importe quel élément HTML. Facile à prendre en main, le script est moderne et flexible avec une interface totalement customisable.
Une infobulle à base de CSS
Le plugin génère des infobulles dont le style est entièrement personnalisable via CSS (typographie, couleur, padding, ombres, etc) et met à disposition plusieurs paramètres de configuration : position de la tooltip par rapport à la souris, délai d’apparition, largeur automatique ou fixe, affichage et couleur de la flêche, placement « intelligent » pour éviter les collisions… etc. Plusieurs thèmes CSS sont disponibles pour skinner vos tooltips, que vous pouvez bien sûr modifier.
Le contenu de l’infobulle peut provenir de différentes sources (en brut dans le JS, title d’un lien, ou encore appel AJAX) et il existe des fonctions de callback. On retrouve également un paramètre animation qui détermine la manière dont l’infobulle apparaît en arrivée et en sortie, le tout géré en full CSS via les transitions CSS3 (sauf pour IE). Vous pouvez donc modifier ou créer vos propres animations via la feuille de style fournie avec le script. Vous l’aurez compris, le plugin est assez modulable.
Mise en place d’une infobulle
On commence par inclure jQuery et le plugin Tooltipster (feuille de style et script JS) :
On définit une classe CSS (ici tooltip) à appliquer sur les éléments HTML sur lesquels on veut afficher les infobulles. Par défaut, Tooltipster utilise l’attribut title pour remplir la bulle, que ce soit une div, une image ou un lien. A noter que le script nous permet d’utiliser n’importe quelle balise HTML dans l’attribut title. Vous pouvez par exemple insérer des images, à condition de spécifier ses dimensions dans les attributs width et height, ou des balises de formatage de texte.
<span class="tooltip" title="Megaptery, explorez les profondeurs du web">test tooltip</span>On termine par activer le plugin jQuery. Pour cela, on appelle Tooltipster sur la classe CSS définie précédemment et votre infobulle est alors fonctionnelle :
$(document).ready(function(){ $('.tooltip').tooltipster(); });Utilisation des thèmes CSS
Le style de vos infobulles peut être facilement changé en modifiant le thème par défaut de Tooltipster qui se trouve dans le fichier tooltipster.css. Vous avez également la possibilité d’ajouter des nouveaux thèmes, très pratique si vous souhaitez en utiliser plusieurs sur votre site. Pour cela, partez de l’exemple et ajouter votre touche personnelle :
.my-custom-theme{ border-radius: 5px; border: 2px solid #000; background: #4c4c4c; color: #fff; }
.my-custom-theme .tooltipster-content{ font-family: Arial, sans-serif; font-size: 14px; line-height: 16px; padding: 8px 10px; }Il vous suffit alors de sélectionner votre thème personnalisé via le paramètre theme comme ceci :
$('.tooltip').tooltipster({ theme: '.my-custom-theme' });