I can not understand how to adjust the position of the emerging tooltip.

If the message is long and is split into 2 or more lines in a narrow window, a hint appears under the mouse cursor and, at the slightest movement, starts to disappear / appear.

In the example below, apparently because of the features of the editor, this does not happen.

var showingTooltip; document.onmouseover = function(e) { var target = e.target; var tooltip = target.getAttribute('data-tooltip'); if (!tooltip) return; var tooltipElem = document.createElement('div'); tooltipElem.className = 'tooltip'; tooltipElem.innerHTML = tooltip; document.body.appendChild(tooltipElem); var coords = target.getBoundingClientRect(); var left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2; if (left < 0) left = 0; // не вылезать за левую границу окна var top = coords.top - tooltipElem.offsetHeight - 5; if (top < 0) { // не вылезать за верхнюю границу окна top = coords.top + target.offsetHeight + 5; } tooltipElem.style.left = left + 'px'; tooltipElem.style.top = top + 'px'; showingTooltip = tooltipElem; }; document.onmouseout = function(e) { if (showingTooltip) { document.body.removeChild(showingTooltip); showingTooltip = null; } }; document.onmousedown = function(e) { if (showingTooltip) { document.body.removeChild(showingTooltip); showingTooltip = null; } }; 
 <div data-tooltip='Если сообщение длинное и разбивается на 2 и более строк в узком окне, подсказка появляется под курсором мыши и при малейшем её движении, начинает исчезать/появляться'> Наведи сюда </div>

    1 answer 1

    Decision:

     document.onmouseout = function(e) { if (showingTooltip && showingTooltip!=e.relatedTarget) { document.body.removeChild(showingTooltip); showingTooltip = null; } };