Infobulles dans un message

[Addicted-People]

Bonsoir,

J'aimerais savoir comment réaliser l'effet suivant :

ICI

C'est à dire, lorsque l'ont fait passer la souris sur l'icon d'un personnage un texte apparaît.

Merci d'avance pour votre aide

[Threax]

Bonjour,

Insérez ce code dans votre CSS :

Panneau d'administration Affichage Couleurs Feuille de style CSS

Code:

a.imginfo span {
  display: none;
}

a.imginfo:hover {
  background: none;
  z-index: 500;
  cursor: help;
}

a.imginfo:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 100px;    /*---- Position de la grande image ----*/
  left: 300px; /*---- Position de la grande image ----*/
  background: #FFFFFF; /*---- Couleur de fond derrière l'image ----*/
  color: #7d7d7d;  /*---- Couleur du texte au dessus ou sous l'image ----*/
  padding: 3px;  /*---- Espace entre la bordure et le contenu (marge) ----*/
  border: 3px solid #b6b6b6; /*---- Couleur et style de la bordure ----*/
}

A l'endroit où vous souhaitez la petite image, ajoutez :

Code:

<a class="imginfo"><img src="URL DE L'ICÔNE" />

<span><b>Texte qui</b>: <br />
 apparaît au survol</span>
</a>

Pour modifier l'endroit où le texte apparaît, la couleur du cadre, etc., vous devez modifier ceci dans le CSS.
Pour modifier l'endroit où elle apparait, vous devez modifier cette partie :

Code:

  top: 100px;    /*---- Position de la grande image ----*/
  left: 300px; /*---- Position de la grande image ----*/

Actuellement, l'image apparaît à 100px du haut de votre écran, et à 300px de la gauche de votre écran.