JSFiddle - React, Tailwind, and code Playground

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

(function($) {
    $.fn.tooltip = function(tooltipEl) {
        var $tooltipEl = $(tooltipEl);
        return this.each(function() {
            var $this = $(this);            
            var hide = function () {
                var timeout = setTimeout(function () {
                    $tooltipEl.hide();
                }, 500);
                
                $this.data("tooltip.timeout", timeout);
            };
            
            /* Bind an event handler to 'hover' (mouseover/mouseout): */
            $this.hover(function () {
                clearTimeout($this.data("tooltip.timeout"));
                $tooltipEl.show();
            }, hide);
            
            /* If the user is hovering over the tooltip div, cancel the timeout: */
            $tooltipEl.hover(function () {
                clearTimeout($this.data("tooltip.timeout"));
            }, hide);            
        });
    };
})(jQuery);

$(document).ready(function() {
    $("#tip").tooltip("#tooltip");
});