Recettes en HTML5 / CSS3

Sommaire

1. Info-bulle paramétrable

1. Info-bulle paramétrable

Retour au manuel

<abbr title="Médecins sans Frontières">MSF</abbr> permet une définition ou une explicitation de sigle dans un post-it : survolez MSF

Ce post-il a plusieurs désavantages : il est toujours jaune pâle et selon les navigateurs, n'apparaît souvent qu'après une demi-seconde et peut disparaître après un moment.

L'utilisation de deux classes et l'attribut display permettent de fabriquer soi-même une info-bulle beaucoup plus souple. Exemple fonctionnel : 

<!DOCTYPE HTML><html><head>
<meta charset="utf-8">
<style>
.mot { color:#00a; }
.expl
  { display:none; }
.mot:hover span.expl
  { display:inline; position:absolute;
    border:solid 1px #008;
    background:#8dd;
    margin: 1.3em 0 0 1px;
    padding:.3em; margin:.5em;
    text-align:center
  }
</style>

</head><body>

<p>
<span class="mot">
MSF<span class="expl"><b>M</b>édecins<br>sans<br><b>F</b>rontières</span>
</span>

</body></html>

Survolez MSFMédecins
sans
Frontières

Par défaut, le texte qui se trouve entre les balises <span class="expl"> et </span> n'est pas affiché (display:none). Mais lorsque «Expression» est survolé (.mot:hover), la balise-fille (désignée par .mot:hover span.expl) s'affiche (display:inline pour un affichage à droite).

background:#xyz permet de rendre le fond opaque (transparent par défaut)
margin permet un positionnement plus fin par rapport à l'expression survolée
padding aère le texte dans son cadre

Parmi les avantages, il est possible d'y intégrer un tableau, une image, ou des liens… permettant même un menu avec sous-menus sans javascript. Défini une fois pour toute dans un ficher CSS, cela prend peu de place dans le fichier HTML (un système de menu un peu plus), surtout si on sacrifie une balise comme je le fais pour ce site (voir www.jchr.be/jchr.css), voir section suivante :

Le désavantage est qu'en fin de ligne, la bulle peut partiellement s'afficher en dehors de la fenêtre du navigateur, alors que <abbr> gère l'espace où la bulle s'affiche.

Amélioration et simplification

<!DOCTYPE HTML><html><head>
<meta charset="utf-8">
<style>
s { text-decoration:none; } /* suppression du «barré» */
s { color:#00a } /* couleur du texte (toujours visible) à survoler */
s:hover, s:active { color:#eee; background:#336 } /* couleur du texte survolé */
s s { display:none; text-decoration:none } /* contenu caché, non souligné */
s:hover s, s:active s /* ce qui apparaît si le texte est survolé */
{ display:inline; position:absolute;
color:#eee; background:#336; text-align:center;
padding:1px 6px 2px; margin: 1.3em 0 0 1px }
</style>

</head><body>

<p>
<s>MSF<s><b>M</b>édecins<br>sans<br><b>F</b>rontières</s></s>

</body></html>