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 :

[pastacode lang= »markup » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2Fprojects%2Fqtip%2Fjs%2Fjquery.1.3.2.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2Fprojects%2Fqtip%2Fjs%2Fjquery.qtip-1.0.0.min.js%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »%24(‘ul%3Alast%20li.active’).qtip(%7B%0Acontent%3A%20’Ceci%20est%20un%20%C3%A9l%C3%A9ment%20actif%20!’%2C%0Ashow%3A%20’mouseover’%2C%0Ahide%3A%20’mouseout’%0A%7D) » message= » » highlight= » » provider= »manual »/]

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 :

[pastacode lang= »markup » manual= »%3Cdiv%20class%3D%22qtip%20qtip-stylename%22%3E%0A%3Cdiv%20class%3D%22qtip-tip%22%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22qtip-wrapper%22%3E%0A%3Cdiv%20class%3D%22qtip-borderTop%22%3E%3C%2Fdiv%3E%0A%2F%2F%20Only%20present%20when%20using%20rounded%20corners%0A%3Cdiv%20class%3D%22qtip-contentWrapper%22%3E%0A%3Cdiv%20class%3D%22qtip-title%22%3E%0A%0A%2F%2F%20All%20CSS%20styles…%0A%3Cdiv%20class%3D%22qtip-button%22%3E%3C%2Fdiv%3E%0A%2F%2F%20…are%20usually%20applied…%0A%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22qtip-content%22%3E%3C%2Fdiv%3E%0A%2F%2F%20…to%20these%20three%20elements!%0A%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22qtip-borderBottom%22%3E%3C%2Fdiv%3E%0A%2F%2F%20Only%20present%20when%20using%20rounded%20corners%0A%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]
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 e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *