JSFiddle - React, Tailwind, and code Playground

HTML

<h3 class="hello">
  <a href="#">Hello World
    <span class="foo">Extra information!</span>
  </a>
</h3>

CSS

.foo{
  position:absolute; 
  display:none; 
  padding:30px;
  border:1px solid black; 
  background-color:white;
}

JavaScript

var delay = 1500, setTimeoutConst, 
    delay2 = 500, setTimeoutConst2;
$(".hello").mouseover(function(){
  setTimeoutConst = setTimeout(function(){
    $('.foo').show();
  },delay);
}).mouseout(function(){
  clearTimeout(setTimeoutConst );
  setTimeoutConst2 = setTimeout(function(){
    var isHover = $('.hello').is(":hover");
    if(isHover !== true){
      $('.foo').hide();
    }
  },delay2);
});