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

Démonstration

Comment utiliser mon site

La description avec une image.

Le code HTML

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

Avec les navigateurs modernes, il est possible de remplacer la balise <a> par une balise <div>. Cela permet alors de placer des liens cliquables dans l'inforbulle.

Le code CSS

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

.tooltip span {
  display:none;
  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.