Plugin JQuery – TipTip – Un Tooltip simple et léger

Posted By Franck Pertegas on 4 Jan 2010 in Framework, Javascript, Programmation | 4 comments

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

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:

<div id="tiptip_holder">
    <div id="tiptip_content">
        <div id="tiptip_arrow">
            <div id="tiptip_arrow_inner"></div>
        </div>
    </div>
</div>

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 :

$(".someClass").tipTip();

Avec option :

$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});

Les éléments concernés :

Cras sed ante. Phasellus in massa. <a class="someClass" title="This will show up in the TipTip popup.">Curabitur dolor eros</a>, gravida et, hendrerit ac, cursus non, massa.
<span id="foo">
<img class="someClass" title="A picture of the World" src="image.jpg" />
</span>

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