Menu
How to align the tooltip the natural style: right bottom of the mouse pointer?
<!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> 
321
The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" . CSS: The tooltip class use position:relative , which is needed to position the tooltip text ( position:absolute ). Note: See examples below on how to position the tooltip.
Dynamic positioning The Tooltip and its tip pointer can be positioned dynamically based on the target's location. This can be achieved by using the refresh method, which auto adjusts the Tooltip over the target.
For default tooltip behavior simply add the title attribute. This can't contain images though.
<div title="regular tooltip">Hover me</div> Before you clarified the question I did this up in pure JavaScript, hope you find it useful. The image will pop up and follow the mouse.
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; } One solution for multiple elements is to update all tooltip span's and setting them under the cursor on mouse move.
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; } }; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
