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>
You can use jQuery UI plugin, following are reference URLs
Set track to TRUE for Tooltip position relative to mouse pointer eg.
$('.tooltip').tooltip({ track: true });
_x000D_
One way to do this without JS is to use the hover action to reveal a HTML element that is otherwise hidden, see this codepen:
http://codepen.io/c0un7z3r0/pen/LZWXEw
Note that the span that contains the tooltip content is relative to the parent li. The magic is here:
ul#list_of_thrones li > span{
display:none;
}
ul#list_of_thrones li:hover > span{
position: absolute;
display:block;
...
}
As you can see, the span is hidden unless the listitem is hovered over, thus revealing the span element, the span can contain as much html as you need. In the codepen attached I have also used a :after element for the arrow but that of course is entirely optional and has only been included in this example for cosmetic purposes.
I hope this helps, I felt compelled to post as all the other answers included JS solutions but the OP asked for a HTML/CSS only solution.
We can achieve the same using "Directive" in 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';
});
You can check this post for further details. http://www.ufthelp.com/2014/12/Tooltip-Directive-AngularJS.html
I prefer this technique:
function showTooltip(e) {_x000D_
var tooltip = e.target.classList.contains("tooltip")_x000D_
? e.target_x000D_
: e.target.querySelector(":scope .tooltip");_x000D_
tooltip.style.left =_x000D_
(e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)_x000D_
? (e.pageX + 10 + "px")_x000D_
: (document.body.clientWidth + 5 - tooltip.clientWidth + "px");_x000D_
tooltip.style.top =_x000D_
(e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)_x000D_
? (e.pageY + 10 + "px")_x000D_
: (document.body.clientHeight + 5 - tooltip.clientHeight + "px");_x000D_
}_x000D_
_x000D_
var tooltips = document.querySelectorAll('.couponcode');_x000D_
for(var i = 0; i < tooltips.length; i++) {_x000D_
tooltips[i].addEventListener('mousemove', showTooltip);_x000D_
}
_x000D_
.couponcode {_x000D_
color: red;_x000D_
cursor: pointer;_x000D_
}_x000D_
_x000D_
.couponcode:hover .tooltip {_x000D_
display: block;_x000D_
}_x000D_
_x000D_
.tooltip {_x000D_
position: absolute;_x000D_
white-space: nowrap;_x000D_
display: none;_x000D_
background: #ffffcc;_x000D_
border: 1px solid black;_x000D_
padding: 5px;_x000D_
z-index: 1000;_x000D_
color: black;_x000D_
}
_x000D_
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur_x000D_
adipiscing<span class="tooltip">This is a tooltip</span></span>_x000D_
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua._x000D_
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi_x000D_
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span_x000D_
class="couponcode">reprehenderit<span class="tooltip">This is_x000D_
another tooltip</span></span> in voluptate velit esse cillum dolore eu_x000D_
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,_x000D_
sunt in culpa qui officia deserunt mollit anim id est <span_x000D_
class="couponcode">laborum<span class="tooltip">This is yet_x000D_
another tooltip</span></span>.
_x000D_
(see also this Fiddle)
This CAN be done with pure html and css. It may not be the best way but we all have different limitations. There are 3 ways that could be useful depending on what your specific circumstances are.
#imagehover td:hover::after{_x000D_
content: " ";_x000D_
white-space: pre;_x000D_
background-image: url("http://www.google.com/images/srpr/logo4w.png");_x000D_
position: relative;_x000D_
left: 5px;_x000D_
top: 5px;_x000D_
font-size: 20px;_x000D_
background-color: transparent;_x000D_
background-position: 0px 0px;_x000D_
background-size: 60px 20px;_x000D_
background-repeat: no-repeat;_x000D_
_x000D_
}_x000D_
_x000D_
_x000D_
#imagehover table, #imagehover th, #imagehover td {_x000D_
border: 0px;_x000D_
border-spacing: 0px;_x000D_
}
_x000D_
<a href="https://www.google.com">_x000D_
<table id="imagehover" style="width:50px;height:10px;z-index:9999;position:absolute" cellspacing="0">_x000D_
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>_x000D_
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>_x000D_
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>_x000D_
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>_x000D_
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>_x000D_
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>_x000D_
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>_x000D_
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>_x000D_
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>_x000D_
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>_x000D_
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>_x000D_
_x000D_
</table>_x000D_
Google</a>
_x000D_
#googleLink{_x000D_
_x000D_
cursor: url(https://winter-bush-d06c.sto.workers.dev/cursor-extern.php?id=98272),url(https://9dc1a5c00e8109665645209c2d036b1c.cloudflareworkers.com/cursor-extern.php?id=98272),auto;_x000D_
_x000D_
}
_x000D_
<a href="https://www.google.com" id="googleLink">Google</a>
_x000D_
<a href="https://www.google.com" title="??" alt="??">Google</a>
_x000D_
Source: Stackoverflow.com