Tooltipster, une tooltip jQuery moderne et flexible

Tooltipster est un plugin jQuery qui permet de mettre en place des infobulles, aussi appelées « tooltip », au rollover 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 simples et élégantes 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 à votre convenance.

tooltipster_jquery

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) que vous pouvez télécharger aussi bien sur le site officiel du plugin que sur GitHub :

<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>

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.

<a title="Megaptery, explorez les profondeurs du web" href="https://www.megaptery.com/" class="tooltip">
   <img src="https://www.megaptery.com/megaptery_250x250.jpg" width="250" height="250" />
</a>

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'
});

Pour conclure, Tooltipster est un plugin jQuery rapide à mettre en place pour afficher des infobulles entièrement customisables.

Requis : jQuery
Compatibilité : Firefox, Chrome, Opera, Safari, IE8+
Démonstration : http://calebjacob.com/tooltipster/
Licence : MIT

Commentaires

  • L’intérêt pour un site web est de pouvoir customiser les infobulles en faisant appel à différentes sources, le tout de manière simple et efficace, module intéressant, il va faciliter la tâche à pas mal de développeurs.

  • Pas mal et super pratique, merci de la découverte ;)

  • un petit hors sujet, juste pour dire que je trouve le thème du site très beau, bravo, je ne sais pas is un thème payant ou gratuit mais bon choix.