Position HTML-Tooltip par rapport au pointeur de la souris

Comment aligner l’info-bulle sur le style naturel: en bas à droite du pointeur de la souris?

~~~ Un peu plus de texte pour pouvoir soumettre. ~~~ Un peu plus de texte pour pouvoir soumettre. ~~~ Un peu plus de texte pour pouvoir soumettre. ~~~

   Tooltip with Image   .tooltip { text-decoration:none; position:relative; } .tooltip span { display:none; } .tooltip span img { float:left; } .tooltip:hover span { display:block; position:absolute; overflow:hidden; }     Google

Pour le comportement des info-bulles par défaut, ajoutez simplement l’atsortingbut title . Cela ne peut cependant pas contenir d’images.

 Hover me

Avant de clarifier la question que j’ai posée en JavaScript, j’espère que vous la trouverez utile. L’image apparaîtra et suivra la souris.

jsfiddle

JavaScript

 var tooltipSpan = document.getElementById('tooltip-span'); window.onmousemove = function (e) { var x = e.clientX, y = e.clientY; tooltipSpan.style.top = (y + 20) + 'px'; tooltipSpan.style.left = (x + 20) + 'px'; };

CSS

 .tooltip span { display:none; } .tooltip:hover span { display:block; position:fixed; overflow:hidden; }

Extension pour plusieurs éléments

Une solution pour plusieurs éléments consiste à mettre à jour toutes les plages d’infobulle et à les placer sous le curseur lors du déplacement de la souris.

jsfiddle

 var tooltips = document.querySelectorAll('.tooltip span'); window.onmousemove = function (e) { var x = (e.clientX + 20) + 'px', y = (e.clientY + 20) + 'px'; for (var i = 0; i < tooltips.length; i++) { tooltips[i].style.top = y; tooltips[i].style.left = x; } };

Une façon de faire cela sans JS consiste à utiliser l’action de survol pour révéler un élément HTML qui serait masqué, voir ce codepen:

http://codepen.io/c0un7z3r0/pen/LZWXEw

Notez que la plage contenant le contenu de l’info-bulle est relative au li parent. La magie est là:

 ul#list_of_thrones li > span{ position: relative; display:none; } ul#list_of_thrones li:hover > span{ position: absolute; display:block; ... }

Comme vous pouvez le voir, l’intervalle est masqué à moins que le listitem ne soit survolé, révélant ainsi l’élément span, l’intervalle peut contenir autant de HTML que nécessaire. Dans le codepen attaché, j’ai également utilisé un élément: after pour la flèche, mais celui-ci est bien entendu entièrement facultatif et n’a été inclus dans cet exemple qu’à des fins esthétiques.

J’espère que cela aide, je me suis senti obligé de poster comme toutes les autres réponses incluaient des solutions JS mais l’OP demandait une solution HTML / CSS uniquement.

Vous pouvez utiliser le plug-in d’interface utilisateur jQuery, vous trouverez ci-dessous des URL de référence.

Définissez la piste sur TRUE pour la position de l’info-bulle par rapport au pointeur de la souris, par exemple.

 $('.tooltip').tooltip({ track: true });

Je préfère cette technique:

 function showTooltip(e) { var tooltip = e.target.classList.contains("tooltip") ? e.target : e.target.querySelector(":scope .tooltip"); tooltip.style.left = (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth) ? (e.pageX + 10 + "px") : (document.body.clientWidth + 5 - tooltip.clientWidth + "px"); tooltip.style.top = (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight) ? (e.pageY + 10 + "px") : (document.body.clientHeight + 5 - tooltip.clientHeight + "px"); } var tooltips = document.querySelectorAll('.couponcode'); for(var i = 0; i < tooltips.length; i++) { tooltips[i].addEventListener('mousemove', showTooltip); }

 .couponcode { color: red; cursor: pointer; } .couponcode:hover .tooltip { display: block; } .tooltip { position: absolute; white-space: nowrap; display: none; background: #ffffcc; border: 1px solid black; padding: 5px; z-index: 1000; color: black; }

 Lorem ipsum dolor sit amet, consectetur adipiscingThis is a tooltip elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderitThis is another tooltip in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumThis is yet another tooltip.

Nous pouvons réaliser la même chose en utilisant “Directive” dans Angularjs.

  //Bind mousemove event to the element which will show tooltip $("#tooltip").mousemove(function(e) { //find X & Y coodrinates x = e.clientX, y = e.clientY; //Set tooltip position according to mouse position tooltipSpan.style.top = (y + 20) + 'px'; tooltipSpan.style.left = (x + 20) + 'px'; });

Vous pouvez vérifier cet article pour plus de détails. http://www.ufthelp.com/2014/12/Tooltip-Directive-AngularJS.html