Ok !
Alors voici un code tout simple que j'ai découvert sur CSSActif, donc inutile de mettre les crédits >.<
Voici tout d'abord le css avec les commentaires originaux qui te permettront de le personnaliser. C'est très pratique, en revanche il y a un bug de saut de ligne que je ne comprends pas, alors si tu connais quelqu'un doué en codage il faudra lui demander x) Cependant, ce bug n'apparait pas si l'infobulle est accolée à un item d'une liste.
- Code:
/* Infobulle */
div.infobulle {
position: relative;
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}
div.infobulle div{
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 0; /* on définit une valeur pour l'ordre d'affichage */
position: absolute;
}
div.infobulle:hover div {
display: block; /* 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: -15px; /* on positionne notre infobulle */
left: 50px;
background: #ff874d; /* arrière-plan de l'infobulle */
color: white; /* texte dans l'infobulle */
padding: 3px;
/* bordures de votre infobulle*/
border: 1px dotted white;
border-left: 1px dotted white;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px s5px;
}
Ensuite voici la partie html, qui s'applique à n'importe quel texte ou image :
- Code:
<div class="infobulle">TEXTE (qui s'affiche normalement)<div>TEXTE de l'infobulle.</div></div>
Voilà !
Hum, je voulais te montrer l'exemple mais malheureusement ça ne fonctionne pas sur ce topic, c'est un peu étrange...
Mais tu peux toujours regarder le résultat là : http://testsmal.kikooforum.com/h4-signanrp , en cliquant sur "Salamy" puis "Attaque", ou "Maladrok" puis le premier nom qui s'affiche en gras.
Si tu as des questions n'hésite pas ! Je sais que ce n'est pas le meilleur code mais bon si ça peut te dépanner ^^'
Sinon j'ai trouvé ça : http://ogamemaio.forumgratuit.org/t3-code-css-actuel (si tu descends il y a marqué "infobulle"). Je ne sais pas ce que ça vaut, mais tu peux toujours essayer