Temps : 20 min
Domaine : HTML, CSS
Compatibilité : IE7+, Firefox 3.0+, Opéra 10+
Ce tutoriel permet de réaliser des infobulles en HTML / CSS sans utiliser de Javascript. Cette méthode est compatible avec les principaux navigateurs Web et est valide W3C, elle permet d'alléger le poids de la page. Si on affiche l'infobulle dans un navigateur texte (ex : Lynx) le contenu est visible et présenté comme un élément sous-jacent ce qui améliore l'accessibilité de votre page. Le code CSS décrit est minimal, libre à chacun de personnaliser ses styles en fonction du design global du site.
Principe
Dans un premier temps, il faut mettre en forme la partie HTML, pour cela on utilise des listes imbriquées. L'élément permanent désigne ce qui est toujours visible à l'écran, cela peut être un lien, une image, du texte... Le second item de la liste contient la partie dynamique, qui n'apparait que si l'on survole l'élément permanent. On utilise la propriété display pour afficher ou non l'infobulle. La liste est formatée grâce au CSS, on supprime puce et marges. Ici, le texte fixe est en bleu pour indiquer à l'utilisateur qu'il se démarque mais pour augmenter l'usabilité il est conseillé de rajouter un pictogramme ou de surligner l'élément afin que l'utilisateur comprenne que l'élément se démarque. Il est possible de faire ressembler cet élément à un lien avec la propriété "text-decoration: underline" pour le bloc CSS ".conteneur li.permanent" .Code source
Code HTML (à placer dans la feuille html ou a intégrer dans la page php)<ul class="conteneur">
<li class="permanent">Élément permanent</li>
<li class="temporaire">
<ul class="infoBulle">
<li class="elementInfoBulle">Infobulle</li>
</ul>
</li>
</ul>Code CSS (à placer dans la feuille de style ou dans le header de la page Web)
.conteneur{
margin: 0; /* Suppression des marges créées par des navigateurs Web */
padding: 0;
list-style-type : none; /* Suppression des puces de liste */
}
.conteneur li{
margin: 0;
padding: 0;
display: none; /* Aucun élément de la liste n'est visible */
}
.conteneur li.permanent{ /* Toujours visible */
display: inherit; /* Annulation du display: none */
padding: 0;
color: blue;
}
.conteneur:hover li{
display: inherit; /* Si curseur sur permanent : annulation du display: none */
}
.conteneur .temporaire{
margin: auto;
padding: 0;
list-style-type : none;
position: absolute; /* Positionner l'infobulle sans perturber le reste du contenu de la page */
top: 100%; /* Positionnement */
}
.conteneur .temporaire li{ /* l'infobulle */
padding: 0;
margin: 0;
}