qTip, un plugin jQuery pour générer des infobulles
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ère infobulle">mon premier lien</a></p> <p>Voici <a href="#" title="ma deuxième infobulle">mon deuxième lien</a></p> <p>Voici <a href="#" title="ma troisième infobulle">mon troisiè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