Des tooltips élégants avec tipTip

Temps de lecture : < 1 minutes

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 :

Précédent

Détecter des visages avec JQuery

Suivant

Spriter

  1. qwerty

    C’est possible de le faire en full CSS.

  2. En effet mais la les choses sont simplifies et c’est la que c’est intressant

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Fièrement propulsé par WordPress & Thème par Anders Norén