qTip, un plugin jQuery pour générer des infobulles

7 décembre 2010
•
JS / jQuery
•
2 commentaires

qTip est un plugin jQuery qui permet d’afficher des infobulles (ou tooltips) sur n’importe quel élément HTML. Reconnu comme le plugin le plus abouti dans son domaine, qTip est facile à utiliser et peut gérer aussi bien du contenu statique que dynamique.

Des infobulles personnalisables

  • le style et la position sont entièrement personnalisables (couleur, taille, radius)
  • les coins des bordures arrondies sont faits sans PNG, via l’élément canvas de HTML5
  • la possibilité d’ajouter et de configurer quelques effets d’animation (fade, slide, grow)
  • la gestion de contenu dynamique, notamment avec de l’AJAX
  • l’auto-dégradation (si JavaScript est désactivé) pour avoir un affichage basique

Et le code, ça donne quoi ?

Dans cet exemple, on va récupérer la valeur de l’attribut title d’un lien hypertexte pour l’afficher dans une infobulle. On commence par inclure la librairie jQuery et le plugin qTip, puis on fait appelle à notre fonction qTip.

jQuery(document).ready(function() {
   jQuery('#content a[href][title]').qtip({
      content: {
         text: false
      },
      position: {
         corner: {
            tooltip: 'bottomMiddle',
            target: 'topMiddle'
          }
      },
      style: {
         tip: true,
         name :'cream'
      }
   });
});

Pour la partie HTML, de simples liens contenant un attribut title.

<div id="content">
   <p>Voici <a href="#" title="ma premi&egrave;re infobulle">mon premier lien</a></p>
   <p>Voici <a href="#" title="ma deuxi&egrave;me infobulle">mon deuxi&egrave;me lien</a></p>
   <p>Voici <a href="#" title="ma troisi&egrave;me infobulle">mon troisi&egrave;me lien</a></p>
</div>

C’est terminé. Vos infobulles seront désormais visibles lorsque vous survolerez les différents liens, et sans faire appel à une feuille de style. qTip est donc un plugin jQuery très pratique pour faire apparaître de belles bulles d’informations. À découvrir sur le site officiel et sa documentation complète.

[EDIT] : qTip est disponible en version 2 à l’adresse suivante : http://craigsworks.com/projects/qtip2/

Requis : jQuery
Démonstration : http://craigsworks.com/projects/qtip/
Licence : MIT

Commentaires