Il y avait fort longtemps que je ne vous avais pas fait d’article sur jQuery, à vrai dire, il y avait fort longtemps que je ne vous avais pas fait d’article tout court. Cette fois je vais vous parler d’un plugin jQuery assez sympa (du moins je l’apprécie) et qui va vous permettre de réaliser vos tooltips de manière esthétique, mais surtout avec beaucoup de possibilités, comme y insérer des images, du texte, des vidéos etc…
Ce plugin jQuery, c’est qTip.
Alors, comment utilise-t-on ce plugin ?
Bien entendu on appelle les librairies, soit jQuery et qTip :
Admettons vous souhaitez rajouter le tooltip sur les éléments li avec la classe « active » :
content: 'Ceci est un élément actif !',
show: 'mouseover',
hide: 'mouseout'
})
Voici la manière de base d’utiliser ce plugin. L’avantage aussi, c’est le fait de pouvoir travailler sur le css du tooltip, voici la structure de l’élément tooltip :
<div class="qtip-tip" rel="cornerValue"></div>
<div class="qtip-wrapper">
<div class="qtip-borderTop"></div> // Only present when using rounded corners
<div class="qtip-contentWrapper">
<div class="qtip-title"> // All CSS styles...
<div class="qtip-button"></div> // ...are usually applied...
</div>
<div class="qtip-content"></div> // ...to these three elements!
</div>
<div class="qtip-borderBottom"></div> // Only present when using rounded corners
</div>
</div>
Dès maintenant, vous pouvez réaliser de jolis tooltip 
Avec ce plugin vous pourrez :
- Ajouter du texte
- Ajouter du texte depuis des attributs
- Ajouter des images
- Modifier la position du tooltip
- Utiliser l’image maps, c’est à dire positionner des tooltips sur des éléments d’image
- Coller le tooltip à un élément en suivant le redimensionnement de navigateur
- Créer un modal tootip (une sorte de fenêtre focus)
- Charger des images
- Importer des Website thumbnails
- Insérer des vidéos Youtube
- Et réaliser un utilitaire de traduction via le moteur de traduction google (très sympathique !)
Vous l’aurez compris, ce plugin, est un plugin très évolué et bien pratique pour les adeptes de jQuery.
Retrouvez le site ici : http://craigsworks.com/projects/qtip
Toutes les démonstrations ici : http://craigsworks.com/projects/qtip/demos
Téléchargement : http://craigsworks.com/projects/qtip/download
Et la documentation ici : http://craigsworks.com/projects/qtip/docs
Lien vers le fork de qtip en version 2 : http://craigsworks.com/projects/qtip2
Articles qui peuvent vous intéresser :
- TinyMCE – Un nouveau site officiel
- Superfish – Plugin jQuery – Créez vos menus déroulants
- jQuery – Sélectionner les checkbox enfants
- Image Cube – Plugin jQuery – Un effet renversant
- jQuery Cycle Plugin – Plugin jQuery – Toujours plus loin dans les effets « SlideShow »
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Sympa mais assez vieux.
Par contre le fork de qtip en version 2 est arrivé il n’y a pas très longtemps : http://craigsworks.com/projects/qtip2/
Bien vu Amaury !
Merci pour l’info
[...] qTip – Plugin jQuery – L’art du Tooltip [...]
[...] $ ( 'ul:last li.active' ) . qtip ( { content : 'Ceci est un élément actif !' , Admettons vous souhaitez rajouter le tooltip sur les éléments li avec la classe « active » : show : 'mouseover' , Bien entendu on appelle les librairies, soit jQuery et qTip : qTip – Plugin jQuery – L’art du Tooltip | LudiBlog [...]