* {
  font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New;

}
a.info {
  position: relative;
  color: #576186;
  text-decoration: none;
}

a.info span {
  display: none; /* on masque l'infobulle */
font-size: 12px;

}
a.info:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;

  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 60px; /* on positionne notre infobulle */
  left: 60px;

  background: #C0CDE5;

  color: #576186;
  padding: 3px;

  border: 3px solid #3E3D70;
}

<a class="info">texte<span>texte info bulle</span></a>

<a class="info">[img]TON IMAGE[/img]<span>texte info bulle</span></a>

<a class="info">texte<span>[img]IMAGE DANS L'INFOBULLE[/img]</span></a>

<a class="info">[img]IMAGE A L'EXTÉRIEUR[/img]<span>[img]IMAGE A L'INTÉRIEUR[/img]</span></a>