How to display a tooltip under the element?

Hello, please tell me how to get the tip under and not over?
next.plnkr.co/edit/CEYfQIQmvQO45sEveChc?p=preview&...
March 12th 20 at 08:42
3 answers
March 12th 20 at 08:44
Solution
spoiler
<!DOCTYPE HTML>
<html>

the <head>
 <meta charset="utf-8">
<style>
 body {
 height: 2000px;
 /* the hint should work regardless of scrolling */
}

 .button {
 position: relative;
}

 .button:hover .tooltip {
 display: block;
}

 .tooltip {
 display: none;
 position: absolute;
 padding: 10px 20px;
 top: 130%;
 left: 0;
 /* prettiness... */
 white-space: nowrap;
 border: 1px solid #b3c9ce;
 border-radius: 4px;
 text-align: center;
 font: italic 14px/1.3 arial, sans-serif;
 color: #333;
 background: #fff;
 box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
</style>
</head>

the <body>

 <p>I I I I I I I I I</p>
 <p>I I I I I I I I I</p>

 <button class="button" data-tooltip="tooltip longer than element">One button</button>
 <button class="button" data-tooltip="HTML<br>tooltip">Another button</button>

 <p>Scroll the page to the links at the top and check whether you find the clues.</p>


 <p style="margin-top: 1200px">Scroll to links at the top and check whether you find the clues.</p>
 <button class="button" data-tooltip="tooltip longer than element">One button</button>
 <button class="button" data-tooltip="HTML<br>tooltip">Another button</button>


the <script>
 document.onmouseover = function(e) {
 var target = e.target;

 var tooltip = target.getAttribute('data-tooltip');
 if (!tooltip) return;

 var tooltipElem = document.createElement('span');
 tooltipElem.className = 'tooltip';
 tooltipElem.innerHTML = tooltip;
target.appendChild(tooltipElem);
};
</script>

</body>

</html>
Tell me, with repeated hovers pojavljajutsja doubles how to fix them?
5bbfb1a87e586826831371.png - Norris.Marv commented on March 12th 20 at 08:47
Oops)
@Norris.Marv, in the script add this check if (target.querySelector('.tooltip')) return;
immediately after the announcement of the target - Fiona commented on March 12th 20 at 08:50
March 12th 20 at 08:46
March 12th 20 at 08:48

Find more questions by tags JavaScript