JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

<p><a href="#" id="anchor" title="">hover me</a><br /> will display tooltip on first try</p>
<p style="margin-top: 50px;"><a href="#" id="anchor2" title="">hover me</a><br /> won't display tooltip on first try</p>

JavaScript

anchor.addEventListener("mouseover", function(){
  setTimeout(
      function(){
          anchor.setAttribute('title', 'hello');
              }
      , 100);

}, false);

anchor2.addEventListener("mouseover", function(){
  setTimeout(
      function(){
          anchor2.setAttribute('title', 'hello');
              }
      , 100);

}, false);

function fireEvent(element,event){
    if(document.createEvent){
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event,true,true);
        return !element.dispatchEvent(evt);
    } else if(document.createEventObject) {
        var evt = document.createEventObject();
        return element.fireEvent('on'+event,evt);
    }
};