1. Services|
2. Références|
3. Articles|
4. Didacticiels|
5. Ressources|
6. Jobs|
7. Contact|
8. Termes|
9. Aide|
10. Sitemap|

Nos autres articles

Bulles d'aide ou tooltips en (X)HTML

Les bulles d'aide existent depuis longtemps dans les environnements graphiques. En Windows par exemple, elles sont souvent suscitées pour rafraîchir la mémoire de l'utilisateur quant au maniement de telle ou telle option d'un programme.

Nul doute que vous souhaitiez bénéficier de la même souplesse dans la construction de pages (X)HTML.

La manière simple

La manière la plus simple de construire de petites bulles d'aide est d'utiliser l'attribut title des balises (X)HTML. C'est d'ailleurs ce que fait le présent paragraphe avec le code suivant :

<p title="Illustration de la manière la plus simple de créer des bulles d'aide"> 

    La manière la plus simple de construire de petites bulles d'aide est d'utiliser
    l'attribut <code>title</code> des balises (X)HTML. C'est d'ailleurs ce que
    fait le présent paragraphe.

</p>

La manière soignée

Loin de nous l'idée de dénigrer l'attribut title. Nous souhaitons simplement lui adjoindre une façon un peu plus minutieuse de présenter la bulle d'aide en question (tooltip en anglais) ... comme dans l'exemple suivant : bulle d'aide. (Aide: Ici ... toute une explication qui peut même être très longue avec des images, etc.)

De quoi est fait une telle bulle d'aide ? En fait elle est consitituée de deux balises span :

1. une balise réservée au mot (ou suite de mots) sur lequel fournir une explication,
2. une balise englobant l'explication.

Imaginons que nous souhaitions fournir une petite bulle sur les mots "bulle d'aide" dans un petit paragraphe, voilà comment nous y prendre :

<p>
    Voilà donc le petit paragraphe qui contient les mots "bulle 
    d'aide". C'est sur ces mots que nous devrions fournir le tooltip.
</p>

Entourons les mots de deux balises span :

<p>

    Voilà donc le petit paragraphe qui contient les mots "<span 
    onmouseover="tooltip('bulleExemple','show');" 
    onmouseout="tooltip('bulleExemple','hide');">bulle 
    d'aide</span><span class="tooltip" id="bulleExemple"> (Aide: l'explication en 
    question)</span>". C'est sur ces mots que nous devrions fournir le 
    tooltip.

</p>

… ce qui donne :

Voilà donc le petit paragraphe qui contient les mots "bulle d'aide (mettez votre curseur sur les mots en gras) (Aide: l'explication en question)". C'est sur ces mots que nous devrions fournir le tooltip.

La balise span de classe tooltip est définie de la manière suivante dans un CSS :

span.tooltip        {   z-index         :   1000;
                        display         :   none;
                        position        :   fixed;
                    }                   

L'instruction CSS display:none évite son affichage. Donc, par défaut, toute bulle d'aide est cachée. Chaque balise span.tooltip est affublée d'un ID unique (pour qu'on sache quelle balise il faut afficher au moment où c'est nécessaire).

L'autre balise span informe le navigateur de tenir compte de deux événements : onmouseover et onmouseout. Donc quand la souris de l'utilisateur sera positionnée sur la suite de mots pour lesquels fournir une explication, une fonction javascript est invoquée : tooltip.

Quand la souris est sur la suite de mots, on demande l'affichage de la balise d'aide : onmouseover="tooltip('bulleExemple','show')". Quand la souris quitte la suite de mots, on demande de cacher la balise d'aide : onmouseout="tooltip('bulleExemple','hide')". Quelle est la balise qu'il faut afficher ou faire disparaître ? bulleExemple, c'est le premier argument de la fonction tooltip.

Pour que tout cela fonctionne, il faut que le petit javascript qui suit soit chargé sur votre page :

<script type="text/javascript">
    MouseX = 0;
    MouseY = 0;

    function MousePos()
    /*---------------*/
    {
        MouseX = event.x + document.body.scrollLeft;
        MouseY = event.y + document.body.scrollTop;
    }

    function tooltip( szID,szVerb )
    /*---------------------------*/
    {
        if ( szVerb == 'hide' )
        {
            if ( oDiv = document.getElementById( szID )
                oDiv.style.display = "none";
        }
        else if ( szVerb == 'show' )
        {
            if ( oDiv = document.getElementById( szID )
            {
                MousePos();            

                oDiv.style.display      = "block";
                oDiv.style.left         = MouseX;
                oDiv.style.top          = MouseY;
            }
        }
        return ( true );
    }
</script>

Là vous avez, a priori, la base d'une gestion assez minutieuse des bulles d'aide. Et le plus amusant, c'est que sans le javascript et sans le CSS, votre page reste parfaitement "accessible", c'est{-}à{-}}}dire utilisable par tous.

Plus fort encore … avec des styles !

Comme annoncé au début de l'article, il est même possible d'affubler la bulle d'aide de styles bien trempés (Aide: ici un tooltip complet qui représente plusieurs lignes d'aide et qui affiche un style ambitieux, avec un bord, une taille, une couleur d'arrière-plan, et même une image de fond.).

C'est qu'ici, nous avons utilisé un troisième argument à la fonction tooltip : les styles dont il faut tenir compte !

Pour le coup, nous avons dû modifier (légèrement) le javascript :

<script type="text/javascript">
    MouseX = 0;
    MouseY = 0;

    function MousePos()
    /*---------------*/
    {
        MouseX = event.x + document.body.scrollLeft;
        MouseY = event.y + document.body.scrollTop;
    }

    function tooltip( szID,szVerb )
    /*---------------------------*/
    {
        if ( szVerb == 'hide' )
        {
            if ( oDiv = document.getElementById( szID )
                oDiv.style.display = "none";
        }
        else if ( szVerb == 'show' )
        {
            if ( oDiv = document.getElementById( szID )
            {
                MousePos();            

                oDiv.style.display      = "block";
                oDiv.style.left         = MouseX;
                oDiv.style.top          = MouseY;

                if ( szStyle != null )
                {
                    var aTokens;
                    aTokens = szStyle.split(';');
                    if ( aTokens.length > 0 )
                    {
                        for ( i=0;i<aTokens.length;i++ )
                        {
                            szCSSInstr  = aTokens[i];
                            aCSSMembers = szCSSInstr.split(':');
                            if ( aCSSMembers.length == 2 )
                            {
                                szCmd = "oDiv.style." + aCSSMembers[0] + '= "' + aCSSMembers[1] + '"';
                                eval( szCmd );
                            }
                        }
                    }
                }
            }
        }
        return ( true );
    }
</script>

C'est dans Vae Soli!

Ce petit script se trouvera dans la prochaine version de Vae Soli!, prévue pour la fin de l'année. Dèjà Joyeux Noël et Bonne Année à tous.