tooltip.js

export default class Bs {

  constructor(selector) {
    this.selector = selector;
  }

  tooltip() {
    let uid = 0;
    document.querySelectorAll(this.selector).forEach(el => {
      el.addEventListener('mouseover', ev => {
        let tooltipId = 'tooltip'+(++uid);
        ev.target.setAttribute('aria-describedby', tooltipId);
        let position = ev.target.getBoundingClientRect();

        let template = `
        <div class="tooltip tooltip-top" role="tooltip" id="${tooltipId}">
        <div class="tooltip-inner">${ev.target.title}</div>
        </div>
        `;

        document.querySelector('body').insertAdjacentHTML('afterbegin', template);
        let elSize = position.left-position.right;
        let tooltipSelected = document.getElementById(tooltipId);
        tooltipSelected.style.cssText = `
        position: absolute;
        top: ${(position.top-40)+'px'};
        left: ${(position.left+elSize/2)+'px'};
        `;
        this.fadeIn(tooltipSelected);
      });

      el.addEventListener('mouseout', ev => {
        let nodeEl = document.getElementById(ev.target.getAttribute('aria-describedby'));
        this.fadeOut(nodeEl);
      });
    });
  }

  fadeOut(el) {
    var timerOut = setInterval(function() {
      el.style.opacity -= 0.02;
    }, 10);
    if (el.style.opacity == 0) {
      clearInterval(timerOut);
    }
  }

  fadeIn(el) {
    var timerIn = setInterval(function() {
      el.style.opacity += 0.02;
    }, 10);
    if (el.style.opacity == 1) {
      clearInterval(timerIn);
    }
  }
}