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

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

Author: Franck Pertegas

Share This Post On

4 Comments

  1. Toujours aussi attentif a tous se qui peut se faire et a toutes les nouveautés. Je m’incline

    Post a Reply
  2. Excellent plugin, je cherchais ça depuis un moment.
    Dommage que le site de l’auteur ne fonctionne pas 😉

    Post a Reply

Trackbacks/Pingbacks

  1. 35 plugins jQuery rien que pour vos sites web ! | LudiBlog - [...] Je vous en parle ici Un tooltip simple et léger pour votre site web. Le [...]
  2. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] SuperFish Image Cube jQuery Approach (mb)Extruder Pajinate jQuery Pagination plugin jQuery Masonry TipTip Quicksand [...]

Submit a Comment

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