Quand vous souhaitez donner des informations à la volée, vous utilisez sûrement l’attribut title sur vos liens. Cependant, le rendu ne sera pas le même d’un navigateur à l’autre. De plus, les infos bulles basiques du navigateur ou du système d’exploitation sont rarement belles. Mais grâce au plugin JQuery tipTip vous allez pouvoir mettre en place des tooltips élégants. TipTip est fourni avec un CSS par défaut noir, mais libre à vous de le changer car il n’est pas très complexe.
Pour l’utiliser c’est très simple, pour le mot où vous souhaitez ajouter un tooltip il faut faire :
<a class="tiptip" href="#" title="message tooltip">mot</a>
Et côté JavaScript, vous avez juste à faire appel au plugin sur votre classe tipTip :
$(function(){
$(".tiptip").tipTip();
});
Voici un exemple en images, avec un contenu assez long dans la tooltip :
