JSFiddle - React, Tailwind, and code Playground

HTML

<div id='A'> A </div>
<div id='B'> B</div>

CSS

div {
  border: 2px dashed firebrick;
  float: left;
  font-size: 50pt;
  font-weight: bold;
  padding: 5px;
  margin: 5px;
    
}

#B {
  display: none;
}

JavaScript

$(document).ready(function() {    
    var timerId, delay = 300;    
    var a = $("#A"), b = $("#B");
    
    function stopHide() {
      clearTimeout(timerId);
    }
    
    function showTip() {
        b.show();
    }
    
    function startHide() {
      timerId = setTimeout(function(){
        b.hide();
      }, delay);
    }
    a.mouseenter(showTip).mouseenter(stopHide).mouseleave(startHide);       b.mouseenter(stopHide).mouseleave(startHide);
});