Afficher et masquer
CHAPITRE 11
155
Des infobulles personnalisées
Une infobulle est une explication contextuelle se déclenchant au survol d’un mot ou
d’une partie de texte spécifique. La norme HTML prévoit déjà cette fonctionnalité avec
l’attribut title (à ne pas confondre avec alt, que certains navigateurs interprètent à tort
comme title). Malheureusement, la représentation de cette propriété est imposée :
infobulles en jaune, sur une seule ligne, dans un nombre restreint de caractères.
Les comportements dynamiques en CSS nous permettront de créer nos propres
infobulles (figure 11-4).
Pour cela, reprenons en l’adaptant la technique présentée au début de ce chapitre.
Dans le cas présent, la position du bloc dépend du mot auquel il se rattache au lieu
d’être fixe sur la page.
Le contenu de l’élément est un conteneur pour l’élément en ligne , objet
de l’affichage conditionné. Un span positionné impose un élément lui-même
positionné ; pour rester dans le flux et le paragraphe, un positionnement relatif est
adéquat.
Dans le code suivant, les termes à survoler sont d’abord caractérisés par un lien de
classe info ; ils sont alors mis en valeur par un texte noir et un soulignement en pointillés gris (utilisant une bordure basse).
Lors du survol, une boîte de texte () s’affiche deux caractères sous le mot. Elle
est verte et placée en absolu par rapport au mot. Voici le code complet qui permet
d’obtenir un tel résultat :
Figure 11–4
Une infobulle
personnalisée
HTML

Survolez le mot "Alsace"région
française capitale de la choucroute ou survolez le mot
"Strasbourg"ville alsacienne où il fait
bon vivre! pour obtenir des explications.