Publié le 08/03/2013
Auteur Fobec
Réseaux sociaux
0 partages
0 tweets
0 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 6145 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 267 articles
|BIO_PSEUDO|
Commentaires récents

Publié par Outsourcing dans news

Le PageRank n'a plus une reelle importance a mon humble avis mais bcp de mes clients continue a juger de la qualite de ma prestation en referencement avec la barre verte!

Publié par mohammed dans java

Bonjour ,Merci pour ce travail ,juste j'ai une question pour ce qui concerne les textes avec les caracteres speciaux comment faire??

Publié par BOKOMBEJEAN dans java

code source excellente,
maintenant comment l'afficher dans une zone de texte ou un champ de texte?

Publié par Jacques dans CMS

Cette méthode produit une gamme de gris qui ne tient pas compte des caractéristiques de la vision humaine.
En vidéo on utilise la fonction luminance qui représente mieux les jaunes e...

Publié par fobec dans java

La boucle de lecture est corrigée et prend en compte l'état pause. Sympa d'avoir signaler l'erreur