HTML info-bulle position par rapport au pointeur de la souris
Comment aligner l'info-bulle le style naturel: en bas à droite du pointeur de la souris?
<!DOCTYPE html>
<html>
<head>
<title>Tooltip with Image</title>
<meta charset="UTF-8">
<style type="text/css">
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none;
}
.tooltip span img {
float:left;
}
.tooltip:hover span {
display:block;
position:absolute;
overflow:hidden;
}
</style>
</head>
<body>
<a class="tooltip" href="http://www.google.com/">
Google
<span>
<img alt="" src="http://www.google.com/images/srpr/logo4w.png">
</span>
</a>
</body>
</html>
- Êtes-vous à l'aide de jquery ? Ou seulement css/javascript ? Avez-vous besoin de suivre le pointeur de la souris lorsque le curseur de l'élément ou simplement afficher une fois l'info-bulle à une position lors de la première planant l'objet ?
- Pas de jQuery, pas de JavaScript, uniquement en CSS. Je n'ai pas besoin de suite, je veux juste de la commune info-bulle comportement.
Vous devez vous connecter pour publier un commentaire.
Pour défaut d'info-bulle comportement il suffit d'ajouter le
title
attribut. Cela ne peut pas contenir des images.Avant de clarifier la question, je l'ai fait en pur JavaScript, j'espère que vous le trouverez utile. L'image pop-up et suivez la souris.
jsFiddle
JavaScript
CSS
S'étendant sur plusieurs éléments
Une solution pour de multiples éléments à mettre à jour tous les info-bulle
span
's et de les placer sous le curseur de la souris se déplacer.jsFiddle
Un moyen de le faire sans JS est l'utilisation de l'passez à l'action pour révéler un élément HTML qui est autrement cachés, voir ce codepen:
http://codepen.io/c0un7z3r0/pen/LZWXEw
Noter que la plage qui contient l'info-bulle de contenu est relatif à la société mère de li. La magie est ici:
Comme vous pouvez le voir, la travée est caché, à moins que le listitem les survole, révélant ainsi la durée de l'élément, la durée peut contenir autant de html que vous en avez besoin. Dans le codepen joint j'ai également utilisé un :après l'élément de la flèche, mais que, bien sûr, est entièrement facultative et n'a été inclus dans le présent exemple à des fins cosmétiques.
J'espère que cette aide, je me suis senti obligé de publier comme toutes les autres réponses inclus JS solutions, mais les OP demandé un code HTML/CSS seule solution.
Vous pouvez utiliser l'INTERFACE utilisateur de jQuery plugin, voici une liste d'URLs
Jeu de piste à VRAI pour l'info-bulle position par rapport au pointeur de la souris
par exemple.
JS:
Je préfère cette technique:
JS:
CSS:
HTML:
(voir aussi ce Violon)
Nous pouvons obtenir le même à l'aide de la "Directive" dans Angularjs.
Vous pouvez consulter ce post pour plus de détails.
http://www.ufthelp.com/2014/12/Tooltip-Directive-AngularJS.html