JSFiddle - React, Tailwind, and code Playground

by mahemoff

HTML

<a id="tip" href="#">Tooltip</a>
<div id="tooltip">Tootlip contents</div>

CSS

div { 
    display: none; 
    background-color: 'yellow';
    border: 1px solid black;
    width: 100px;
    padding: 10px;
}

JavaScript

var timeout;

function hide() {
    timeout = setTimeout(function () {
        $("#tooltip").hide('fast');
    }, 500);
};

$("#tip").mouseover(function () {
    clearTimeout(timeout);
    $("#tooltip").stop().show('fast');
}).mouseout(hide);

$("#tooltip").mouseover(function () {
    clearTimeout(timeout);
}).mouseout(hide);