Jusqu'à maintenant, il existait peu d'alternatives comme de vieilles et disgracieuses méthodes conçues autour de JavaScript ou encore des solutions utilisant le tag blank (pour une compatibilité avec Internet Explorer 6). Une autre possibilité est d'ignorer purement et simplement IE6 et faire usage de la pseudo classe hover en conjonction avec l'élément parent qui contient le texte de l'info-bulle. Je pensais vous proposer une solution de ce style mais j'ai finalement trouvé une nouvelle entièrement réalisée avec du CSS3.

Le seul problème est que ma solution se dégrade gracieusement dans les navigateurs qui ne prennent pas en charge les éléments CSS3 que j'ai utilisé et qui sont beaucoup plus élégants que les anciennes méthodes car il utilise l'attribut title d'un élément, plutôt que de créer un balisage supplémentaire au sein d'un élément parent.

Commençons avec le code HTML (PS : l'exemple suivant est basé sur l'utilisation des images positionnées en arrière-plan pour les div, d'où les dimensions fixes).

<div title="Texte de l'info-bulle pour la première div"></div> 
<div title="Texte de l'info-bulle pour la deuxième div"></div>
			

En résumé, ma méthode utilise le pseudo-élément :before (ou :after) et la propriété de contenu, le tout associé à la pseudo-classe :hover.

Tout d'abord je récupère la valeur de l'attribut title des balises div en utilisant la propriété content et la fonction attr. Remarquez comment j'ai défini la propriété display: none pour le contenu généré, je le rendrai visible avec la pseudo-classe :hover.

div:before { 	
	content: attr(title); 	
	display: none; 
}
			

Maintenant je combine la pseudo-classe :hover et le pseudo-élément :before ensemble ce qui permettra de définir les valeurs pour le contenu généré lorsque la div est survolée.

div:hover::before { 	
	width: 200px; 	
	display: block; 	
	background: yellow; 	
	border: 1px solid black; 	
	padding: 8px; 	
	margin: 25px 0 0 10px; 
}
			

Un des problèmes que l'on peut rencontrer à ce stade est que lorsque nous avons deux éléments flottants à gauche l'un de l'autre et que l'on survole l'un deux, l'infobulle s'affiche mais en dessous de l'élément adjacent. Il s'agit d'un simple cas de superposition du contenu généré dans la div. Lorsque j'ai remarqué ce problème, ma première pensée a été de préciser une valeur de superposition (cf. z-index) dans la déclaration précédente. Toutefois, après s'être référé à la spécification du W3C, il était évident que, conformément à leurs recommandations, les agents utilisateurs ignorent la propriété position dans une instance telle que la déclaration ci-dessus, ce qui rend donc une valeur de z-index inutile.

La solution est de spécifier le z-index et les propriétés de positionnement dans une déclaration séparée traitant exclusivement avec la classe pseudo :hover.

div:hover { 	
	z-index: 10; 	
	position: relative; 
}
			

Maintenant cela fonctionne ! Cette méthode est bien entendue compatible avec tous les navigateurs supérieurs à Internet Explorer 7 ainsi que Safari 3, Firefox 2.0.0.12 & Opera 9.5b.

Par contre, on ne peut rien faire contre le comportement, par défaut, des navigateurs qui lui est conforme aux normes en ce qui concerne le rendu des attributs de title, donc lorsqu'on laisse trop longtemps le curseur de la souris sur l'élément div, le comportement par défaut du navigateur se superpose au contenu généré par l'effet CSS.

Tous mes remerciements à evarisnea pour sa relecture.