Publié le 08/03/2013
Auteur Fobec
Réseaux sociaux
0 partages
0 tweets
2 plus
1 commentaires

Bulle d'aide (tooltip) basique, support de l'ajax

Les ToolTip sont les bulles d'aide qui apparaissent au survol de la souris sur les liens hypertextes. Ce comportement est géré par défaut par le navigateur internet.
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.

tuxExemple 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')">



tuxExemple 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')">

Ajouter un commentaire

Les champs marqués d'un * sont obligatoires, les adresses emails se sont pas publiées.
avatar claude77

Publié par claude77

le 27/05/2013 à 11:36:52

Super application, fonctionne bien
exemple sur une image

A lire aussi

Réseaux sociaux
Présentation de l'article
Catégorie
tuto - webmaster
Mise a jour
08/03/2013
Visualisation
vu 4763 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 261 articles
|BIO_PSEUDO|
Commentaires récents

Publié par OmegaPlatypus dans java

Dans mon cas, plusieurs lettres etaient repetes plusieurs fois, dont la derniere a l'indfiniment. En ajoutant robot.keyReleaseKeyEvent.VK_A, robot.keyReleaseKeyEvent.VK_X, etc. apres chacune des frap...

Publié par web agency cms Typo3 dans tuto

De nombreux articles sur le web parlent des CMS (Content Management System) et tentent de lister les meilleurs d'entres-eux.
Mais très souvent, sauf quelques rares libres blancs, ces article...

Publié par Diégo DELPY dans CMS

IL FAUT IMPERATIVEMENT DONNER DES CHEMINS COMPLETS à pFrom et à pTo, sinon ça marche
bizzarrement.
Exemple :

// Chemin relatif : PAS BON !
pFrom := \'Bureau\\Télécharg...

Publié par arthur dans java

essaye avec une while, cela devrais marcher. mais après je ne sais pas comment paramétrer. c'est toi qui voit

Publié par ali dans logiciel

it is very good i am very happy becose for hand cap helpn tha is a good work