Le script foToolTip.js prend en charge les autres cas de figure. Par exemple, lorsque l'on veut apporter un complément d'information à l'internaute. Au survol d'un élément HTML, une bulle d'aide apparaît avec les données sans qu'il y ait de lien hypertexte.
Class javascript de bulle d'aide
La class foToolTip.js contient l'ensemble du code javascript permettant d'afficher une bulle d'aide au survol d'un élément de la page. Le texte affiché peut aussi bien être du texte statique que le résultat d'une requête ajax. Son intégration a été simplifiée au maximum, une seule ligne doit être ajoutée au code HTML.En ce qui concerne la personnalisation, les constantes tt_bgcolor & tt_bordercolor correspondent respectivement à la couleur de fond et à la bordure de la bulle d'aide.
/*----------------------------------------------------------------------------\\
| foToolTip.js v1.0 |
|-----------------------------------------------------------------------------|
| Created by Christian Fobec.com |
| http://www.fobec.com/tuto/1121/bulle-aide-tooltip-basique-support-ajax.html |
|-----------------------------------------------------------------------------|
| static custom ToolTip with ajax support |
|-----------------------------------------------------------------------------|*/
/**
* FoToolTip main class
*/
function FoToolTip() {
var tt_id="fotooltip";
var tt_bgcolor="#FFFFCC";
var tt_bordercolor="#FFE2A6";
/** créer l'objet ToolTip assigner les evt au 'parent' */
this.init=function (obj,text) {
tt=getInstance();
tt.style.display='block';
obj.onmousemove=mouseMouveEx;
obj.onmouseout=hide;
loadcontent(text);
}
/** private: Charger le contenu du ToolTip */
function loadcontent(text) {
tt=getInstance();
if (text.substr(0,4)!='http') {
tt.innerHTML=text;
} else {
tt.innerHTML='Chargement en cours ...';
/* new ajax().request(text,
{
request:'GET',
onresponse:function(response, success) {
tt=getInstance();
tt.innerHTML=response;
}
});*/
}
}
/** private: cacher le ToolTip */
function hide() {
tt=getInstance();
tt.style.display='none';
}
/** private: deplacer le ToolTip**/
function mouseMouveEx(e) {
var pos=getPos(e);
tt=getInstance();
tt.style.left=(pos.x+20)+"px";
tt.style.top=pos.y+"px";
}
/** private: retourne un nouveau ToolTip ou instance en cours**/
function getInstance() {
var tt=document.getElementById(tt_id);
if (!tt) {
tt=document.createElement("div");
tt.style.position="absolute";
tt.style.backgroundColor=tt_bgcolor;
tt.style.border='1px solid '+tt_bordercolor;
tt.style.padding="5px";
tt.id=tt_id;
document.body.appendChild(tt);
console.debug("create new foToolTip");
return tt;
} else {
return tt;
}
}
/** private: position du curseur */
function getPos(e) {
e = e || window.event;
var cursor = {
x:0,
y:0
};
if (e.pageX || e.pageY) {
cursor.x = e.pageX;
cursor.y = e.pageY;
}
else {
cursor.x = e.clientX
(document.documentElement.scrollLeft ||
document.body.scrollLeft) -
document.documentElement.clientLeft;
cursor.y = e.clientY
(document.documentElement.scrollTop ||
document.body.scrollTop) -
document.documentElement.clientTop;
}
return cursor;
}
}
/**
* Static Call de ToolTip, faciliter l'utilisaton du TooTip
*/
FoToolTip.show=function(obj,text) {
var foToolTip=new FoToolTip();
foToolTip.init(obj, text);
};
Intégrer un tooltip dans vos pages web
La bulle d'aide est rattachée à un élément HTML sur l'évènement onmouseover. Pour utiliser la class foToolTip, procéder comme suit pour vos pages web:1. enregistrer la class dans un fichier nommé foToolTip.js,
2. déclarer le fichier javascript dans la page HTML,
3. associer la fonction FoToolTip.show() à un élément HTML de la page.
<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
...
<title>Exemple ToolTip</title>
<script type="text/javascript" src="foToolTip.js"></script>
...
</head>
<body>
<img src="tux.png" onmouseover="FoToolTip.show(this,'Je suis Tux')">
</body>
</html>
Démo de la bulle d'aide
Ci-dessous, les exemples de ToolTip de texte statique et de chargement du contenu avec ajax sur une image.
Exemple 1:Au survol de l'image, une bulle d'aide affiche le texte fixe 'Je suis Tux', exactement de la meme manière que le survol d'un lien hypertexte.
Code HTML:
<img src="tux.png" onmouseover="FoToolTip.show(this, 'Je suis Tux')">
Exemple 2:Le chargement du contenu en ajax est détecté automatiquement lorsque le texte contient une URL. Au survol de l'image, une bulle d'aide affiche un texte d'attente puis le contenu de la requête ajax.
Code HTML:
<img src="tux.png" onmouseover="FoToolTip.show(this, 'http://www.example.com/ajax.php')">
