qTip – Plugin jQuery – L’art du Tooltip

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.

tooltip

Alors, comment utilise-t-on ce plugin ?
Bien entendu on appelle les librairies, soit jQuery et qTip :

<script type="text/javascript" src="/projects/qtip/js/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="/projects/qtip/js/jquery.qtip-1.0.0.min.js"></script>

Admettons vous souhaitez rajouter le tooltip sur les éléments li avec la classe « active » :

$('ul:last li.active').qtip({
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 qtip-stylename">
<div class="qtip-tip"></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.

qtip

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 :

Author: Franck Pertegas

Share This Post On

2 Comments

Trackbacks/Pingbacks

  1. GMAP3 – Plugin jQuery – L’API Google Map v.3 Integration à la sauce jQuery | LudiBlog - [...] qTip – Plugin jQuery – L’art du Tooltip [...]
  2. notifications by yanninou - Pearltrees - [...] $ ( 'ul:last li.active' ) . qtip ( { content : 'Ceci est un élément actif !' , Admettons…

Submit a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *