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 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>
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 :
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.
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>
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.
Ajoutez un nouveau commentaire
Notes à propos des commentaires
Nous vous demandons de bien vouloir faire diligence et de respecter les règles les plus élémentaires de bienséance. Les commentaires non appropriés ou offensants pourront être édités voire supprimés.
Les adresses email que vous pourriez nous laisser ne sont JAMAIS affichées par mesure de confidentialité : elles ne nous servent qu'à vous contacter pour éclaircir un point ou l'autre si besoin était.
Notez bien que toutes les balises HTML sont retirées de votre commentaire néanmoins vous pouvez utiliser les marques suivantes pour vous aider à formater votre texte :
Merci