Tooltipster est un script permettant d’afficher des infobulles modernes, bien plus « user-friendly » que ce que proposent les navigateurs. Il nécessite JQuery pour fonctionner (attention que sous Internet Explorer 9 avec JQuery version 1.8, cela ne fonctionnera tout simplement pas!)

Pour le télécharger, rendez-vous sur le site officiel (ici : http://iamceege.github.io/tooltipster/) et cliquez sur le bouton « Download« . Le sous-répertoire « dist » contient deux dossiers essentiels :

• js : contient le script (format normal et format minified)
• css : contient les feuilles de style (format normal et format minified) ainsi que les thèmes par défaut.

Il faudra ensuite l’inclure à la page :

<link rel="stylesheet" type="text/css" href="/tooltipster/css/tooltipster.bundle.css" /> 
<script type="text/javascript" src="/tooltipster/js/tooltipster.bundle.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-x.xx.x.min.js"></script>

Après chargement du script, dans notre page nous allons placer des attributs « title » sur les éléments pour lesquels on veut avoir une infobulle. On va aussi leur assigner une classe, « tooltip« , mais on peut choisir un autre nom.

<img id="imgTest" src="test.jpg" class="tooltip" title="Le texte du tooltip" />

Lors du chargement de la page on doit initialiser les bulles.

<script>
     $(document).ready(function() {
          $('.tooltip').tooltipster();
     });
</script>

Par défaut la fonction tooltipster() ne reçoit aucun paramètre. Elle utilisera donc les options par défaut définies dans le fichier .js du script.

On peut notamment définir :

• contentAsHTML : par défaut à false. Il est conseillé de stocker un objet JQuery dans le contenu. Sinon on peut passer la valeur à true et passer du texte au format HTML en appelant la méthode tooltipster().
• delay : en millisecondes, délai après ouverture. On peut spécifier un
  tableau (par ex : [100, 2000]) ce qui correspondra alors au temps avant
  ouverture et au délai avant fermeture automatique).
• position : attention aussi à la position ; seules 4 sont supportées (top, left, right et bottom). Dans les anciennes versions il existait plusieurs combinaisons mais cela a été supprimé.
• theme : on peut définir un ou plusieurs thèmes à charger. Il faudra penser à charger les CSS quand cela s’applique.

Exemple de feuille de style dans le dossier « csspluginssideTipthemes » :

On peut aussi appeler la méthode tooltipster() en lui passant des options. Utile quand l’élément pour lequel on veut spécifier du texte, n’en a pas à la base.

$(SELECTOR).tooltipster({ 
	content: 'texte à placer', 
	maxWidth: 200 
});

Parmi les options que l’on peut spécifier il y a également divers événements, ce qui permet par exemple d’afficher un contenu récupéré grâce à une requête AJAX.

$(SELECTOR).tooltipster({ 
	delay: [200, 2000], 
	content: 'Chargement...', 
	functionBefore: function(instance, helper) 
	{ 
		if ($(helper.origin).data('ajax') !== 'loaded') 
		{
			$.ajax({ 
				type: 'POST', 
				url: 'action.php?param=', 
				success: function(data) 
				{
					instance.content(data); 
					$(helper.origin).data('ajax', 'loaded'); 
				}
			}); 
		} 
	} 
});

Ce qu’on a fait :

• Appel de la fonction tooltipster().
• On passe les différents arguments ; tout d’abord le délai (delay).
• Ensuite on spécifie le contenu par défaut à afficher pendant l’appel AJAX (content).
• Enfin on ajoute « functionBefore » : elle reçoit deux paramètres (instance et helper).
  • helper.origin : élément HTML sur lequel on définit le tooltip.
  • instance : objet Tooltipster qui appelle la fonction de callback.
  • La condition permet de savoir si l’élément a déjà été chargé ou pas (car on définit une donnée nommée « ajax » avec la valeur « loaded » une fois l’appel effectué).

Si un tooltip est déjà chargé, on peut effectuer diverses manipulations comme changer son contenu ou même le désactiver. On appelle la fonction tooltipster() avec comme premier argument, un nom de méthode (voir documentation). Les arguments suivants dépendent de la méthode appelée.

Exemple :

$(SELECTOR).tooltipster('content', 'nouveau contenu');

A noter que toute la documentation est disponible à l’adresse mentionnée au début de cet article.