Infobulle dans l'image

[Shimurax3]

Bonjour tout le monde :3

Je sais qu'il y a des million de messages différents traitant le sujet, je les ai tous feuilletés et essayer certains codes sans que ça ne fonctionne. Ce que j'aimerais réaliser, c'est obtenir une infobulle pour la PA, mais je ne veux pas que le texte apparaisse à côté de l'image, mais bien DANS/SUR celle-ci.

J'avais déjà une infobulle d'installer, je vous passe le CSS, au cas où vous pourriez modifier à partir de ce que j'ai déjà.

CSS

Code:

/*INFOBULLES de la PA*/

a.imginfo {
position: relative;
color: black;
text-transform: uppercase;
font-family: Arial;
text-align: center;
font-size: 11px;
}

//////

a.imginfo span {
display: none;
-moz-border-radius: 0px 5px 0px 5px;
-webkit-border-radius: 0px 5px 0px 5px;
border-radius: 0px 5px 0px 5px;
}

a.imginfo hover {
background: none;
z-index: 999;
}

a.imginfo:hover span {
display: block;
position: absolute;
z-index: 999;
overflow: hidden !important;
white-space: normal;
top: 2px;
left: 2px;
text-align: center;
text-decoration: none !important;
width: 140px;
background: white ;
padding: 4px;
border: 3px solid #dbdbd7;
}

Merci beaucoup à celui ou celle qui m'apportera une aide précieuse. ~

[Shimurax3]

Un petit up pour ne pas disparaître dans les pages.

[Matriochka]

Bonjour,

Il suffit de jouer un peu avec les marges (margin), avec des marges négatives par exemple, etc.

Si tu ne sais pas faire, fais une petite recherche sur le forum, je crois savoir que certains ont déjà abordé le sujet

[Shimurax3]

Des margins... Ah, ça je connais! J'aurais du y penser XD
Je pensais qu'il y avait un code particulier. ~

Du coup, merciii beaucoup Matriochka ^_^

[Matriochka]

Mais de rien

Si tu as pu résoudre le souci n'oublie pas de cocher l'icône sur ton premier message. Sinon n'hésite pas à demander si tu as encore du mal avec cette infobulle

[Shimurax3]

J'ai réussi à obtenir ce que je voulais, et à rendre le tout rond o/
SAUF QUE...
Le texte à mettre dans l'infobulle apparait en double... J'ai essayé de voir ce qui clochait, mais comme je ne fais que me débrouiller en codage, je ne suis arrivé à rien du tout.

Je mets ceci dans ma PA pour que ça apparaisse ;

Code:

<a class="imginfo"><div style="background-image : url(http://i73.servimg.com/u/f73/16/59/92/57/rond-e10.jpg); -webkit-border-radius: 75px 75px 75px 75px; -moz-border-radius: 75px 75px 75px 75px; border-radius: 75px 75px 75px 75px; height: 100px; width: 100px;"><br></br><span>Florian Darkwood <br>Présent<br> MP?</span>   </div></a>

Et voici les petites modifications apportées à mon CSS ;

Code:

a.imginfo {
position: relative;
color: black;
text-transform: uppercase;
font-family: Arial;
text-align: center;
font-size: 11px;
}

//////

a.imginfo span {
display: none;
-moz-border-radius: 75px 75px 75px 75px;
-webkit-border-radius: 75px 75px 75px 75px;
border-radius: 75px 75px 75px 75px;
}

a.imginfo hover {
background: none;
z-index: 999;
}

a.imginfo:hover span {
display: block;
position: absolute;
z-index: 999;
overflow: hidden !important;
white-space: normal;
top: 2px;
left: 2px;
text-align: center;
text-decoration: none !important;
width: 100px;
height: 100px;
background: dimgray;
padding: 4px;
margin: -8px;
border-radius: 75px 75px 75px 75px;
-moz-border-radius: 75px 75px 75px 75px;
-webkit-border-radius: 75px 75px 75px 75px;
}


Vous pouvez voir ce que ça donne sur mon forum de test (les petites bulles rondes en bas) ;
Forum de test

PS; Les bulles sont blanches pour l'instant, mais il y aura des images dedans prochainement...

Désolé, je suis nulle en codes X'D
Mercii encore pour l'aide apportée! ~

[Shimurax3]

Un petit up si quelquun peut m'aider ^_^ ~
Je vais continuer mes essai/erreur de mon côté.

[Shimurax3]

Petit up ~

[Shimurax3]

J'ai fini par trouver ce qui clochait. o/
Je peux enfin clore ce sujet.

Merci beaucoup ~

Résolu!