TipTip — Infobulles « funky » pour afficher l’attribut HTML « title »

TipTip est un plugin dans la lignée de Tipsy qui permet d’afficher l’attribut title d’un élément précisé par une classes dédiée ou générique dans une bulle d’information bien plus belle que celle qui apparait par défaut. Le fonctionnement de TipTip est le suivant : le script copie puis supprime le title d’origine pour que le navigateur ne soit pas tenté de l’afficher et l’injecte ensuite dans le balisage HTML suivant :

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

L’originalité de TipTip est double : d’une part, il détecte les bords de l’écran pour afficher l’infobulle à gauche ou à droit de l’élément concerné ; d’autre part, le script s’applique en une seule fois à l’ensemble des éléments pour fluidifier l’affichage. Ce qui peut aussi ralentir l’affichage initial (bien que je n’ai rien remarqué à ce niveau-là).

Les options :

TipTip offre de nombreuses options pour personnaliser vos bulles d’aide :

• Largeur de l’infobulle (fixée à 200px par défaut),
• Distance de l’infobulle par rapport à l’élément (3px par défaut),
• Délai avant l’affichage (fixé à 400 millisecondes),
• Effet de FadeIn avant l’affichage,
• Effet de FadeOut après l’affichage.

Par ailleurs, il est possible d’appliquer une fonction personnalisée (callback) avec les options enter et exit :

• `enter` : Fonction de callback sur l’événement `mouseover`,
• `exit` : Fonction de callback sur l’événément `mouseout`.

Exemple d’appel simple :

$(function(){
    $(".someClass").tipTip();
});

Exemple avec quelques options :

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

A priori, TipTip est testé dans IE7 & IE8, Firefox, Safari, Opera et Chrome. Manque le support de IE6, mais bon… En ce qui concerne IE7, j’ai noté quand même des problèmes d’affichage : le texte apparait en blanc sans son infobulle, ce qui est assez gênant.