JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hint"> ?</div>

<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button>
</div>

CSS

.hint {
padding: 20px;
background: white;
width: 10px;
height: 10px;
border-radius: 50%;
}


.desc {
    display: none;
    width: 200px;
    background: white;
    z-index: 3;
    border: 1px solid #CCC;
    border-radius: 3px;
    top: 20px;
    left: -5px;
    padding: 12px;
    color: #666;
    font-size: 12px;
}

JavaScript

$(document).ready(function() {
	var hide_timeout;
  var hide_after = 500; //500 ms
  
  var hint = $('.hint');
  var desc = $('.desc');
  
  hint.mouseenter(function() {
  	desc.show();
  });
  
   hint.mouseleave(function() {
     hide_timeout = setTimeout(function(){
     		desc.hide();
     },hide_after);
  	
  });
  
   desc.mouseenter(function() {
  	clearTimeout(hide_timeout);
  });
  
  desc.mouseleave(function() {
    desc.hide();  	
  });
  
});