J'ai essayé d'implémenter de nombreuses info-bulles différentes sur cette page pour mon client, il est adontif que nous avons une photo du produit apparaître lorsque vous survolez le nom du produit dans la page de commande. J'ai décidé d'utiliser la super simple info-bulle CSS, il est très facile à mettre en œuvre et fait exactement ce que nous voulons. Ça marche sur une page dynamique, les autres que j'ai essayés.
J'ai fait un exemple ici: Tooltip CSS dans Exemple de table . mis à jour pour supprimer les erreurs em>. p>
HTML: strong> p> #JSwrap {
/*for jsfiddle only*/
position: absolute;
left: 100px;
top: 50px;
}
#cart2Produkt {
border: 1px solid #ccc;
width: 500px;
text-align: left;
padding: 10px;
}
#cart2Produkt a.tooltip span {
z-index: 999;
display: block;
position: absolute;
left: -999px;
opacity: 0;
padding: 2px 3px;
margin-left: 8px;
width: 130px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 500ms;
}
#cart2Produkt a.tooltip:hover span {
z-index: 999;
display: block;
position: absolute;
right: 50%;
opacity: 1;
background: #ffffff;
border: 1px solid #cccccc;
color: #6c6c6c;
top: -35px;
left: -15px;
z-index: 10;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
vertical-align: middle;
padding: 1px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#cart2Produkt img {
z-index: 999;
}
4 Réponses :
J'ai vérifié votre code et, comme vous pouvez le constater par la SYTAX JSFIDDLE Hightlighting, vous trouverez de nombreuses erreurs dans votre code: Par exemple, la Span vous commence dans vos finitions en dehors de votre A. Le CSS devrait fonctionner comme celui-ci. Il y a quelques erreurs de plus. Je pense que si vous les corrigez, ça va travailler. (Passez simplement le chèque W3C, alors tout devrait être tout à fait bien)
Edit: J'ai raté une chose que votre lien doit être positionné: relatif; Parce que votre info-bulle est la position: Absolute, l'absolu est toujours relatif au dernier parent relatif.
Supprimez également l'opacité: 0 dans votre plage d'origine
Changez le positionnement, ne fonctionne toujours pas. Toujours à moitié fonctionne dans IE8, il affiche la portée cachée mais uniquement dans les limites de la cellule de table.
Look ça marche: Jsfiddle.net/dbztk/6 Vous avez eu une opacité: 0 dans votre plan d'origine (Cela fonctionne dans IE parce que c'est-à-dire que c'est-à-dire l'opacité CSS, j'utilise sa propre merde; p)
Vous semblez avoir un problème avec CSS. Il suffit d'utiliser des styles de la démonstration de Jsfiddle de travail devrait le réparer. Vous avez eu la pivise définie comme Vérifiez ceci: http://jsfiddle.net/wnzhj/ affichage: Aucun , cependant, il semble que cette boîte à outils fonctionne en masquant l'image à partir de l'écran, à l'aide de à gauche: -999PX . .
Merci Damiel, j'ai essayé de faire les styles les mêmes.
Exemple décent mais un peu compliqué.
Trouver une solution de travail plus lisible ici :
p>
<table class="cart">
<tr>
<th id="pos">Pos</th>
<th id="name">Product</th>
<th id="price">Price</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>
<a href="productdetails.htm" class="hasTooltip">Flatscreen
<span>New visual experience!</span>
</a>
</td>
<td>19.99</td>
</tr>
<tr>
<td>2</td>
<td>
<a href="productdetails.htm" class="hasTooltip">Headset
<span>Inject music directly into your ears!</span>
</a>
</td>
<td>19.99</td>
</tr>
</tbody>
</table>Très utile! beaucoup plus simple que ma version :) +1
J'ai ajouté ceci à mon site, fonctionne la même chose que ma version précédente, affiche uniquement la portée dans les limites de la cellule de la table. Y a-t-il un moyen de remplacer cela? Demandez-le ici: JSFIDDLE.net/mcv7p Tout simplement pas dans mon site actuel ..
Votre CSS détient de nombreux paramètres z-index . Effacez-les ou ajoutez Z-Index: 99999; à la classe .HASTOOLTIP SPAN {...} Pour contourner ce problème. Une autre cause de votre problème pourrait être différente d'affichage ... les valeurs se remplacer mutuellement. Mettez les deux classes CSS de mon exemple pour l'info-bulle au bas de vos définitions CSS ou Ajouter ! Importer à ces attributs.
OK, je l'ai changé, changa la position de Cart2Produkt vers Absolute et HasTooltiP au relatif. Cela a produit un autre problème cependant ...
J'essayais la même chose, essayant d'obtenir une info-bulle CSS pour apparaître à l'extérieur de la cellule de table. Dans mon cas, la cellule de table n'était que de 1px large de sorte qu'il devait apparaître à l'extérieur. J'ai découvert que, en faisant le J'espère que cela aide quelqu'un. : plancher (code> Position: absolu; puis ajoutant marge: -37px 0px 0px -50px; je pourrais utiliser que pour déplacer l'info-bulle autour. MAIS! Si j'essayais de régler le haut / gauche / bas / bas / à droite, le réglage absolu positionné absolument à l'écran, non par rapport à la cellule.
Merci je ne pouvais pas comprendre comment le déplacer à la position: Absolute!
Si vous affichez le bloc de l'étendue, ce qui le rend toujours visible, l'image apparaît-elle? (Je ne pouvais pas l'obtenir)
Il est déjà prêt à bloquer, j'ai essayé
inline-block aussi, cela n'a pas fonctionné ..