123 lines
3.1 KiB
HTML
123 lines
3.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
body {
|
|
height: 2000px;
|
|
/* the tooltip should work after page scroll too */
|
|
}
|
|
|
|
.tooltip {
|
|
position: fixed;
|
|
z-index: 100;
|
|
|
|
padding: 10px 20px;
|
|
|
|
border: 1px solid #b3c9ce;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
font: italic 14px/1.3 sans-serif;
|
|
color: #333;
|
|
background: #fff;
|
|
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
|
|
}
|
|
|
|
#house {
|
|
margin-top: 50px;
|
|
width: 400px;
|
|
border: 1px solid brown;
|
|
}
|
|
|
|
#roof {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 200px solid transparent;
|
|
border-right: 200px solid transparent;
|
|
border-bottom: 20px solid brown;
|
|
margin-top: -20px;
|
|
}
|
|
|
|
p {
|
|
text-align: justify;
|
|
margin: 10px 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div data-tooltip="Here is the house interior" id="house">
|
|
<div data-tooltip="Here is the roof" id="roof"></div>
|
|
|
|
<p>Once upon a time there was a mother pig who had three little pigs.</p>
|
|
|
|
<p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."
|
|
|
|
<p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
|
|
|
|
<p>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a></p>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
let tooltip;
|
|
|
|
document.onmouseover = function(event) {
|
|
// important: a fast-moving mouse may "jump" right to a child on an annotated node, skipping the parent
|
|
// so mouseover may happen on a child.
|
|
|
|
let anchorElem = event.target.closest('[data-tooltip]');
|
|
|
|
if (!anchorElem) return;
|
|
|
|
// show tooltip and remember it
|
|
tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
|
|
}
|
|
|
|
document.onmouseout = function() {
|
|
// it is possible that mouseout triggered, but we're still inside the element
|
|
// (its target was inside, and it bubbled)
|
|
// but in this case we'll have an immediate mouseover,
|
|
// so the tooltip will be destroyed and shown again
|
|
//
|
|
// luckily, the "blinking" won't be visible,
|
|
// as both events happen almost at the same time
|
|
if (tooltip) {
|
|
tooltip.remove();
|
|
tooltip = false;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
function showTooltip(anchorElem, html) {
|
|
let tooltipElem = document.createElement('div');
|
|
tooltipElem.className = 'tooltip';
|
|
tooltipElem.innerHTML = html;
|
|
document.body.append(tooltipElem);
|
|
|
|
let coords = anchorElem.getBoundingClientRect();
|
|
|
|
// position the tooltip over the center of the element
|
|
let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
|
|
if (left < 0) left = 0;
|
|
|
|
let top = coords.top - tooltipElem.offsetHeight - 5;
|
|
if (top < 0) {
|
|
top = coords.top + anchorElem.offsetHeight + 5;
|
|
}
|
|
|
|
tooltipElem.style.left = left + 'px';
|
|
tooltipElem.style.top = top + 'px';
|
|
|
|
return tooltipElem;
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|