Plugin JQuery – TipTip – Un Tooltip simple et léger
Bonjour à tous,
Après plus de 6 semaines d’absences je refais surface petit à petit. Et pour commencer, un petit plugin JQuery simple, pratique et light. TipTip, un Tooltip simple à la mise en place et très léger. Voyons cela de plus près…
TipTip est une infobulle qui détecte les bords de la fenêtre du navigateur et s’assure que l’infobulle reste dans la taille de la fenêtre actuelle. En conséquence, l’infobulle s’adapte et s’affiche au dessus, en dessous, à gauche ou à droite de l’élément en fonction de ce qui est nécessaire pour rester dans la fenêtre du navigateur.
A savoir qu’il n’utilise pas d’image et est entièrement personnalisable en CSS.
TipTip utilise l’attribut title, tout comme l’infobulle du navigateur qui le fait nativement. Toutefois, le titre sera copié et ensuite retiré de l’élément lors de l’utilisation de TipTip, de sorte que la bulle d’aide du navigateur ne s’affiche pas.
TipTip génère un seul ensemble d’éléments popup, plutôt qu’un ensemble d’éléments popup pour chaque élément avec TipTip d’attribué.
Cela contribue à accélérer les choses et réduit le temps de traitement. Les éléments générés sont tous des éléments DIV et sont ajoutés à la fin de l’élément body.
La structure ressemble à ceci:
[pastacode lang= »markup » manual= »%3Cdiv%20id%3D%22tiptip_holder%22%3E%0A%20%20%20%20%3Cdiv%20id%3D%22tiptip_content%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22tiptip_arrow%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22tiptip_arrow_inner%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]
Il existe des noms de classe CSS liés à l’élément div « tiptip_holder » et selon l’orientation qu’il apparaît.
Voici une liste des noms de classe supérieure avec son orientation:
Tip_top – Quand l’info-bulle apparaît au-dessus de l’élément.
Tip_bottom – Quand l’info-bulle apparaît au-dessous de l’élément.
Tip_left – Quand l’info-bulle apparaît à gauche de l’élément.
Tip_right – Quand l’info-bulle apparaît à droite de l’élément.
Tip_left_top – Quand l’info-bulle apparaît à gauche et au-dessus de l’élément.
Tip_left_bottom – Quand l’info-bulle apparaît à gauche et en dessous de l’élément.
Tip_right_top – Quand l’info-bulle apparaît à droite et au-dessus de l’élément.
Tip_right_bottom – Quand l’info-bulle apparaît à droite et en dessous de l’élément.
TipTip a été testé sur : IE7 et IE8, Firefox, Safari, Opera et Chrome.
Comment utiliser TipTip :
Après avoir charger la dernière librairie JQuery, il suffit par exemple de coder cela :
[pastacode lang= »javascript » manual= »%24(%22.someClass%22).tipTip()%3B » message= » » highlight= » » provider= »manual »/]
Avec option :
[pastacode lang= »javascript » manual= »%24(%22.someClass%22).tipTip(%7BmaxWidth%3A%20%22auto%22%2C%20edgeOffset%3A%2010%7D)%3B » message= » » highlight= » » provider= »manual »/]
Les éléments concernés :
[pastacode lang= »markup » manual= »Cras%20sed%20ante.%20Phasellus%20in%20massa.%20%3Ca%20class%3D%22someClass%22%20title%3D%22This%20will%20show%20up%20in%20the%20TipTip%20popup.%22%3ECurabitur%20dolor%20eros%3C%2Fa%3E%2C%20gravida%20et%2C%20hendrerit%20ac%2C%20cursus%20non%2C%20massa.%0A%3Cspan%20id%3D%22foo%22%3E%0A%3Cimg%20class%3D%22someClass%22%20title%3D%22A%20picture%20of%20the%20World%22%20src%3D%22image.jpg%22%20%2F%3E%0A%3C%2Fspan%3E » message= » » highlight= » » provider= »manual »/]
Voici la liste des options :
MaxWidth: ( « 200px » par défaut) – CSS propriété max-width pour l’élément TipTip. Vous pouvez appliquer une règle de pourcentage ou ‘auto’.
EdgeOffset: (3 par défaut) – Distances de la popup TipTip de l’élément avec TipTip qui lui est appliqué par le nombre de pixels spécifié.
delay: (400 par défaut) – Nombre de millisecondes à attendre avant l’apparition du popup TipTip après que vous ayez survolé un élément avec TipTip lié.
FadeIn: (200 par défaut) – vitesse à laquelle le popup TipTip va apparaitre.
fadeOut: (200 par défaut) – vitesse à laquelle le popup TipTip s’estompera hors de vue.
enter: callback function – fonction qui est exécutée chaque fois que vous survolez un élément avec TipTip appliquée.
exit: callback function – fonction qui est exécutée chaque fois que vous sortez d’un élément survolé avec TipTip appliquée.
Démo en vidéo :
TipTip jQuery Plugin from Valio, Inc. on Vimeo.
Voilà, bon code à tous… 😉
Doc : http://code.drewwilson.com/entry/tiptip-jquery-plugin
JQuery : http://plugins.jquery.com/project/TipTip
21 janvier 2010
Toujours aussi attentif a tous se qui peut se faire et a toutes les nouveautés. Je m’incline
21 janvier 2010
En espérant que cela puisse te servir Willzgui 😉
22 octobre 2010
Excellent plugin, je cherchais ça depuis un moment.
Dommage que le site de l’auteur ne fonctionne pas 😉
22 octobre 2010
Bonsoir Topheur,
J’ai vérifié au cas ou, car j’ai écris mon article en janvier, mais le lien et le site de l’auteur fonctionnent encore : http://code.drewwilson.com/entry/tiptip-jquery-plugin