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.
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.
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 :
7 janvier 2011
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/
7 janvier 2011
Bien vu Amaury !
Merci pour l’info 🙂