[grydni4ok_01]

Добрый день. Пытаюсь написать класс, который будет выводить подсказку у 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);

а он не работает, кто может подсказать почему?