Tooltips

gistfile1.txt

var tooltipTimer;
var tooltipDiv;
var tooltip;
var tooltipIn = function(e){
    tooltip = e.target;
    tooltipTimer = setTimeout(function(){
        var position = e.target.getBoundingClientRect();
        tooltip.classList.add("show");
    }, 200);
}
var tooltipOut = function(e) {
    clearTimeout(tooltipTimer);
    tooltip.classList.remove("show");
}
var tooltips = Array.from(document.getElementsByClassName("has-tooltip"));
tooltips.forEach((tooltip) => {
    tooltip.addEventListener('mouseenter', function(e) { tooltipIn(e); })
    tooltip.addEventListener('mouseleave', function(e) { tooltipOut(e); });
});






.has-tooltip { pointer-events: none; }
.has-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  background-color: black;
  color: white;
  border-radius: 2px;
  padding: 5px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.5s, opacity 0.2s linear;
  font-family: sans-serif;
}
.has-tooltip.show::before {
  opacity: 0.8;
  visibility: visible;
  transition: visibility 0.5s, opacity 0.2s linear;
}
.has-tooltip::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content:"\f059";
  pointer-events: all;
  font-size:  20px;
  position: absolute;
  right: 0;
  top: 7px;
}





<p class="has-tooltip" data-tooltip="tooltip goes here"> Regular Text Goes Here </p>