Tooltip

function onShow(e){
      const elem = e.toElement;
      const rect = elem.getBoundingClientRect();
      var tipId = elem.getAttribute('data-tooltip');
      elem.setAttribute('data-tip-id', tipId);
      var tip = document.createElement("div");
      tip.setAttribute('id', tipId);
      tip.innerHTML = elem.getAttribute('data-tooltip');
      if ((document.documentElement.clientHeight - rect.bottom - 50) > 0) {
        tip.style.top = rect.bottom + 10 + 'px';
      } else {
        tip.style.top = rect.bottom - 60 + 'px';
      }
      tip.style.width = 200 + 'px';
      tip.setAttribute('class','tooltip tooltip_active');
      document.body.appendChild(tip);
    }

    function onHide(){
      const elem = document.querySelector('.tooltip');
       elem.parentNode.removeChild(elem);
      elem.style.display = 'none';
    }

function detach (element){
  element.removeEventListener("mouseover", onShow);
   element.removeEventListener("mouseout", onHide);
}

    function showTooltips(){
        var elems = document.querySelectorAll('span');
      elems.forEach(function(elem) {
        elem.addEventListener("mouseover", onShow);
        elem.addEventListener("mouseout", onHide);
    });
    }



    window.onload = function(){
        showTooltips();
    }