Добрый день. Пытаюсь написать класс, который будет выводить подсказку у html-элементов, у которых есть атрибут data-tooltip. Сама подсказка выводится, но хочу чтобы подсказка двигалась за мышью, и не как не могу повесить обработчик чтобы он корректно работал
class Tooltip{
static instance = null;
constructor(){
if (Tooltip.instance) {
return Tooltip.instance;
}
let div = null;
this.initLisener();
Tooltip.instance = this;
}
initLisener(){
document.addEventListener('mouseover', this.onMouseOver);
document.addEventListener('mouseout', this.onMouseOut);
}
onMouseOver(event){
if (!event.target.closest('[data-tooltip]')) { return; }
let elem = event.target.closest('[data-tooltip]');
this.div = document.createElement('div');
this.div.className = 'tooltip';
this.div.style.top = `${event.clientY + 10}px`;
this.div.style.left = `${event.clientX + 5}px`;
this.div.innerHTML = elem.dataset.tooltip;
document.body.append(this.div);
document.addEventListener('mousemove', this.onMouseMove);
}
onMouseMove(event) {
this.div.style.top = `${event.clientY + 10}px`;
this.div.style.left = `${event.clientX + 5}px`;
}
onMouseOut(event){
if (this.div) {
this.div.remove();
}
}
}
let tooltip = new Tooltip();
Вешаю обработчик
document.addEventListener('mousemove', this.onMouseMove);
а он не работает, кто может подсказать почему?
