Infobulle dans un message

[Alexandra59]

Bonjour,

Je ne sais pas vraiment si c'est possible, mais j'aimerais faire des infobulles dans des messages (infobulle pour image). Est-ce possible ?

[Marie-Mizuki]

Bonjour, oui c'est possible.

CSS à mettre dans Affichage>Couleur>Feuille de Style CSS

Code:

a.infobulle {
  position: relative;
}

a.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
  display: inline; /* ceci 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: 5px; /* on positionne notre infobulle */
  left: 15px;

  background: #ebebeb; /* arrière-plan de l'infobulle */

  color: black; /* texte dans l'infobulle */
  padding: 3px;

  /* bordures de votre infobulle*/
  border: 1px dotted black;
  border-left: 1px dotted black;
}

A mettre dans votre message, il contient une image et un lien.

Code:

<a href="#" class="infobulle"><img src="IMAGE EXTERIEUR">
<span>
<img src="IMAGE INTERIEUR">
<br><div><a href="LIEN">NOM DU LIEN</a></div>
<br></span></a>
<br></br>

Code:

<br>

Permet de revenir à la ligne.

Pour mettre une image à l'intérieur de l'infos bulle il faut inséré ceci:

Code:

<img src="IMAGE INTERIEUR">

Pour un lien:

Code:

<div><a href="LIEN">NOM DU LIEN</a></div>

Pour un texte simple, il y a besoin de rien.
L'infos bulle est régler pour avoir cette effet là:

[Alexandra59]

Merci bien.