Infobulle en CSS contenant une image

Avec essentiellement du code CSS, on crée des bulles d'information contenant des images, et dont l'apparence est améliorée.

Placez la souris au-dessus du lien ci-dessous

Le code HTML

<a class="tooltip" href="">
   Démonstration
   <span><img src="http://www.scriptol.fr/images/apache.png">
   <h3>Comment utiliser mon site</h3>
    La description avec une image.>
   </span>
</a>

Le code CSS

.tooltip
{
  text-decoration:none;
  position:relative;
}
.tooltip span
{
  display:none;

  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;
  background:white;	
}
.tooltip span img
{
  float:left;
  margin:0px 8px 8px 0;
}
.tooltip:hover span
{
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  width:auto;
  max-width:320px;
  min-height:128px;
  border:1px solid black;
  margin-top:12px;
  margin-left:32px;
  overflow:hidden;
  padding:8px;
}

Aucun code JavaScript...

On doit désactiver le soulignement au niveau de la balise de lien, sinon il sera actif dans l'infobulle.

On a choisi de placer l'image en haut à gauche avec la propriété float:left. C'est un exemple, on peut changer ou supprimer cette propriété selon ses besoins.

Sur le plan du référencement, on ne recommande pas de mettre les informations essentielles à un produit dans une infobulle. Cela convient plutôt pour fournir des précisions qui aident l'utilisateur à utiliser le site.