Les infobulles avec les feuilles de style CSS

Une infobulleVoici une infobulle CSS. est une information qui apparaît au survol d’un élément. Exemple : placez le curseur sur le mot infobulle.

Distinction infobulle et élément <abbr>

Si vous souhaitez simplement clarifier le sens d'une abbréviation, songez à utiliser l'élément <abbr>, plus simple à mettre en œuvre qu'une infobulle. Exemple : UE.

Voici le code HTML: <abbr title="Union Européenne">UE</abbr>

À vous ensuite de définir la mise en forme des éléments <abbr> dans votre feuille de style CSS.

Ici la règle CSS suivante a été appliquée:

abbr {border-bottom: dotted 1px; cursor: help; }

Le soulignement pointillé est fixé par la valeur dotted. Le point d'interrogation accolé au curseur au survol de l'abbréviation résulte de la déclaration cursor: help.

Attention, la balise <abbr> n'est pas supportée par le navigateur obsolète Internet Explorer 6. Si vous ne voyez pas de pointillés s'afficher sous les abbréviations UE, HTML et CSS, il est peut être temps de changer de navigateur. Pour les forcenés de la rétrocompatibilité, sachez qu'une solution existe.

Les infobulles CSS proprement dites

Vous souhaitez placer quelques infobulles à des endroits bien sentis, sans recourir au langage JavaScript ?

Rien de plus simple ! Il suffit de combiner les éléments <a>, <span> et l'attribut class avec les propriétés CSS display et z-index.

Les informations contenues dans l’infobulle

Infobulle : code HTML à intégrer dans le <body> de votre page web

<p>Une <a href="#" class="bulle">infobulle<span >Voici une infobulle CSS.</span></a> 
est une information qui apparaît au survol d’un élément.</p>

Infobulle : règles CSS à intégrer dans votre feuille de style

.bulle {
	position:relative;
	z-index:50;
	text-decoration:none;
	font-weight:bold;
	color: #894105;
	cursor:default;	}
	
.bulle span {display: none;}

.bulle:hover {background:none; /*correction bug IE*/ }

.bulle:hover span { /*au survol de l’élément, la bulle apparaîtra*/
	display:block;
	position:absolute;
	top:1.5em; left:1.5em; 
	width:15em;
	color: #993300;
	text-align: center;
	background: url(bulle.png) no-repeat top;
	padding: 30px 8px; }

À vous ensuite d’adapter cet exemple à votre page web :

S'agissant de la propriété background : appeler une image d'arrière-plan dans l'infobulle peut entraîner un léger défaut de synchronisation au premier affichage (les affichages suivants sollicitent le cache). En clair : l'image d'arrière-plan de l'infobulle risque de s'afficher après le texte. Si cela vous dérange, au lieu d'envisager des solutions compliquées, supprimez simplement l'image d'arrière-plan et utilisez d'autres propriétés CSS. Exemple : background : #D4DCE9; border : 2px ridge #ACB9B5;

Infobulle : Afficher une image

Rappel: Le code HTML nécessaire pour appeler une image dans une page web est le suivant : <img src="image.png" alt="texte alternatif" />.

Une infobulle peut bien entendu contenir une image. Il suffit pour cela d'intervenir dans le code HTML de la page web et de remplacer le texte figurant dans le <span> par une image. Exemple :

<p>Survolez le mot <a href="#" class="bulle">infobulle<span><img src="image.png"
 alt="texte alternatif"/></span></a> et une image apparaîtra.</p>

Il vous revient, bien entendu, de désigner correctement l'image et, si elle ne se trouve pas dans le même répertoire que la page web, d'indiquer son chemin.

Les déclarations CSS portant sur la couleur du texte contenu dans l'infobulle ou son image de fond ne se justifiant plus, la règle CSS .bulle:hover span sera alors simplifiée de la façon suivante :

.bulle:hover span { /*au survol de l’élément, la bulle apparaîtra*/
	display:block;
	position:absolute;
	top:1.5em; left:1.5em; }