FAQ version Beta 0.5
Questions diverses
Comment contrôler et modifier l'apparence d'une infobulle ?
Pour commencer, il faut bien faire la différence entre l'infobulle (title) et le texte alternatif (alt).
Le texte alternatif (alt) est le descriptif textuel appliqué uniquement aux images et nécessaire aux visiteurs non-voyants par exemple. Il apparait lorsque l'image n'est pas présente.
"alt" est obligatoire sur les balises <img /> et <area /> dans tous les doctypes (HTML et XHTML, strict, transitionnel ou frameset) et ne devrait pas s'appliquer à d'autres éléments.
L'infobulle est le petit cadre (jaune par défaut) qui s'affiche au survol d'un élément. Ce cadre contient en général des informations supplémentaires à propos de cet élément.
La confusion provient généralement d'un bug de comportement de IE : celui-ci crée également une infobulle avec l'attribut "alt", alors que cela n'a pas lieu d'être.
Il n'est pas possible de modifier l'apparence de l'infobulle générée par la propriété "title". Par contre, il est tout à fait possible de créer sa propre infobulle en utilisant une balise que l'on fait apparaître au survol du texte.
Exemple :
AUTRE METHODE :
Il est également possible de créer des infobulles personnalisées avec un zeste de JavaScript :
http://css.alsacreations.com/xmedia/exemples/popup/popup2.htm
Le texte alternatif (alt) est le descriptif textuel appliqué uniquement aux images et nécessaire aux visiteurs non-voyants par exemple. Il apparait lorsque l'image n'est pas présente.
"alt" est obligatoire sur les balises <img /> et <area /> dans tous les doctypes (HTML et XHTML, strict, transitionnel ou frameset) et ne devrait pas s'appliquer à d'autres éléments.
L'infobulle est le petit cadre (jaune par défaut) qui s'affiche au survol d'un élément. Ce cadre contient en général des informations supplémentaires à propos de cet élément.
La confusion provient généralement d'un bug de comportement de IE : celui-ci crée également une infobulle avec l'attribut "alt", alors que cela n'a pas lieu d'être.
Il n'est pas possible de modifier l'apparence de l'infobulle générée par la propriété "title". Par contre, il est tout à fait possible de créer sa propre infobulle en utilisant une balise que l'on fait apparaître au survol du texte.
Exemple :
<p>Survolez le mot <a class="info" href="#">"Toto" <span>un petit garçon sympathique</span></a>
ou survolez le mot <a class="info" href="#">"Ginette" <span>une vilaine madame !</span></a>
pour obtenir des explications.</p>
ou survolez le mot <a class="info" href="#">"Ginette" <span>une vilaine madame !</span></a>
pour obtenir des explications.</p>
a.info {
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.info:hover span {
display: inline;
position: absolute;
top: 2em;
left: 1em;
background: orange;
text-align: center;
color: white;
padding: 2px;
}
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.info:hover span {
display: inline;
position: absolute;
top: 2em;
left: 1em;
background: orange;
text-align: center;
color: white;
padding: 2px;
}
AUTRE METHODE :
Il est également possible de créer des infobulles personnalisées avec un zeste de JavaScript :
http://css.alsacreations.com/xmedia/exemples/popup/popup2.htm
Liens complémentaires