CSS info-bulle sur le problème de l'image

J'ai un problème avec un CSS info-bulle sur une image. En l'utilisant sur le texte fonctionne bien, mais lorsque j'utilise une image à la place du texte, il semble avoir des problèmes, les questions sont un peu difficile à expliquer donc je vais juste vous donner un lien:
http://zorps.dk/css-tooltips/tooltip.html

Code CSS:

.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }

code html:

<p>     <a class="tooltip" href="#"> <img src="icon_question.png" /> <span class="classic">The tooltip text goes here!</span></a></p>

Ce que quelqu'un sait ce qu'est la question?
Merci!

Remarque: le code est pris à partir de: http://sixrevisions.com/css/css-only-tooltips/

InformationsquelleAutor Jacob | 2011-08-11
  1. 4

    C'est le code dans le .info-bulle:hover img class - Si vous l'enlever, il fonctionne bien:

    http://jsfiddle.net/RyRRM/

    • Merci, fonctionne à merveille!
    InformationsquelleAutor evasilchenko
  2. 1

    c'est probablement parce que l'événement est déclenché par l'info-bulle du non-texte-nœud parent. Lorsque vous passez la souris sur l'image, il détecte un événement mouseout pour le parent. Vous pouvez essayer de faire de l'image un fond de css et le réglage de la largeur de l'élément au lieu de l'intégration de la <img>

    Votre balisage pourrait alors être 

    <a class="tooltip image" href="#"><span class="classic">The tooltip text goes here!</span></a>

    et votre css serait

    .tooltip.image {
width: 12px;
height: 14px;
background-image: url("./icon_question.png");
display: block;
background-repeat: no-repeat;
}
    InformationsquelleAutor Joseph Marikle