Script Javascript : Tooltip

Tooltip 1.1

Ce script permet de réaliser des bulles d'aide sur des éléments HTML. Il permet d'avoir des bulles d'aide qui s'affichent instantannément, et qui "suivent" la souris.

Ce script permet de garder le contenu de la bulle d'aide accessible, même aux navigateur qui ne disposent pas de javascript... En effet, le contenu de la bulle d'aide est celui de l'attribut title de l'élement HTML sur lequel la bulle s'affiche.

Ce script a été testé avec succés sur Firefox, Konqueror, IE5.5, IE6, IE7, Opera 9.21. Il fonctionne peut-être sur d'autres navigateurs, merci alors de m'en informer :-). Par contre je sais qu'il ne fonctionne pas sur IE5.0, car il y a une erreur javascript mais je ne sais pas laquelle (je n'ai pas de console JS avec la version que j'ai, donc si vous avez un IE5 sous la main...)

Cette version 1.1 a été retravaillée par rapport à la version 1.0, et corrige notament la compatibilité avec IE7.

Utilisation

  1. Insérez le script dans votre page HTML, ainsi qu'un élement HTML vide ayant pour id "tooltip" et qui sera utilisé pour l'affichage de la bulle d'aide : 
    
<script type="text/javascript" src="tooltip.js"></script>
<div id="tooltip"></div>
    Insérer ceci qu'une seule fois dans votre page, même si vous voulez plusieurs bulles d'aides dans votre page
  2. Ajoutez la feuille de style tooltip.css livrée dans le zip, ou alors mettez au moins le style CSS "position:absolute;visibility:hidden;" sur la div tooltip, soit via l'attribut style : 
    
<div id="tooltip" style="position:absolute;visibility:hidden;">
</div>
    soit dans une feuille CSS séparée : 
    
#tooltip {
   position:absolute;
   visibility:hidden;
}
    Vous pouvez bien sûr ajouter d'autres styles pour personnaliser l'apparence de la bulle d'aide. Par exemple, pour la bulle d'aide de la démo, avec donc une apparence classique, il faut rajouter : 
    
background-color:#FFEEC7; border:1px solid black; 
padding:0.2em; font-size:0.8em;
  3. Sur les élements où vous voulez qu'une bulle d'aide s'affiche, ajoutez les attributs onmouseover et onmouseout comme dans l'exemple, ainsi qu'un attribut title contenant le texte à afficher dans la bulle d'aide : 
    
<div onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)"
    title="Hello you !">Voici le contenu d'une div, avec 
    un exemple de bulle d'aide. Passez votre souris au dessus.</div>
  4. C'est tout :-)

Démonstration

Au final cela donne par exemple ceci :

Voici le contenu d'une div, avec un exemple de bulle d'aide. Passez votre souris au dessus.

En passant votre souris au dessus de la zone bleue, vous devriez voir apparaître le tooltip, une petite boite jaune, qui suit les mouvements de votre souris.

Plugin smarty

L'archive est livrée avec deux plugins pour smarty, le moteur de template PHP. Le premier, tooltipinit insère dans le template la balise script et la div tooltip. Le deuxième, permet d'ajouter une bulle d'aide facilement sur un élément.


<html>
<head>..</head>
<body>
....
{tooltipinit}

<div {tooltip} title="Hello you !">Voici le contenu d'une div,
avec un exemple de bulle d'aide. Passez votre souris au dessus.</div>
...
ou encore:
<div {tooltip text=$montexte}>Voici le contenu d'une div,
avec un exemple de bulle d'aide. Passez votre souris au dessus.</div>


</body>
</html>

Téléchargement

Le script est publié gratuitement, et sous la licence LGPL.