Mouseleave не срабатывает, если скроллить страницу
Есть функция, которая рендерит tooltip. Проблема в том, что, если я начинаю скроллить после того, как появится тултип, он скроллится вместе со строницей. Почему не срабатывает mouseover, если курсор уже не на элементе?
var timeOutHoverTooltip;
$(document).on('mouseenter', "[data-tooltip]", (e) => {
clearTimeout(timeOutHoverTooltip);
timeOutHoverTooltip = setTimeout(() => {
let element = $(e.target).closest('[data-tooltip]');
if(element.length > 0) {
const title = element[0].getAttribute('data-tooltip');
const wrap = document.getElementById('tooltip');
if (wrap && title) {
const type = element[0].getAttribute('data-tooltip-type');
if(type === 'long') {
wrap.classList.add(type);
const double = element[0].getAttribute('data-double-line');
if(element[0].hasAttribute('data-double-line') && double === 'true') {
wrap.querySelector('.tooltipe-component-title').innerHTML = `<span class="tooltip-with-subtitle">
<span class="tooltip-title">${element[0].getAttribute('data-first-line')}</span>
<span class="tooltip-subtitle">${element[0].getAttribute('data-second-line')}</span>
</span>`;
}
else wrap.querySelector('.tooltipe-component-title').innerHTML = title;
}
else wrap.querySelector('.tooltipe-component-title').innerHTML = title;
align(element[0], wrap);
wrap.classList.remove('t-hide');
}
}
}, 200)
});
$(document).on('mouseleave', "[data-tooltip]", (e) => {
clearTimeout(timeOutHoverTooltip);
const wrap = document.getElementById('tooltip');
if (wrap) {
let element = $(e.target).closest('[data-tooltip]');
if(element.length > 0) {
const type = element[0].getAttribute('data-tooltip-type');
if(type) wrap.classList.remove(type);
}
wrap.classList.add('t-hide');
}
});