<!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>
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>
Зачем здесь
if (tooltip) {
tooltip.remove();
tooltip = false;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px;
/* make body scrollable, the tooltip should work after the scroll */
}
.tooltip {
position: fixed;
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);
}
</style>
</head>
<body>
<p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
<p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
<button data-tooltip="the tooltip is longer than the element">Short button</button>
<button data-tooltip="HTML<br>tooltip">One more button</button>
<p>Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.</p>
<script>
let tooltipElem;
document.onmouseover = function(event) {
let target = event.target;
// if we have tooltip HTML...
let tooltipHtml = target.dataset.tooltip;
if (!tooltipHtml) return;
// ...create the tooltip element
tooltipElem = document.createElement('div');
tooltipElem.className = 'tooltip';
tooltipElem.innerHTML = tooltipHtml;
document.body.append(tooltipElem);
// position it above the annotated element (top-center)
let coords = target.getBoundingClientRect();
let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
if (left < 0) left = 0; // don't cross the left window edge
let top = coords.top - tooltipElem.offsetHeight - 5;
if (top < 0) { // if crossing the top window edge, show below instead
top = coords.top + target.offsetHeight + 5;
}
tooltipElem.style.left = left + 'px';
tooltipElem.style.top = top + 'px';
};
document.onmouseout = function(e) {
if (tooltipElem) {
tooltipElem.remove();
tooltipElem = null;
}
};
</script>
</body>
</html>
А здесь
if (tooltipElem) {
tooltipElem.remove();
tooltipElem = null;
}
tooltipElem = null;
??? Ничего не меняется)
Простой
