JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

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

JavaScript

anchor.onmouseover = function(e){
    console.log(e);
  setTimeout(
      function(){
          anchor.setAttribute('title', 'hello');
          fireEvent(anchor, "mouseover");
              }
      , 100);

};

anchor.onmouseover = function(){
  setTimeout(
      function(){
          anchor2.setAttribute('title', 'hello');
              }
      , 100);

};

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);
    }
};