JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">bah bah!</a>
<div>dont show me</div>

CSS

div {display:none; width:100px; height:100px; background:red; margin:20px}
a {font-size:16px; font-weight:bold}

JavaScript

(function($){
    $.fn.hoverDelay = function(over, out, ms){
        var delay, ms, that;
        ms = ms || 500;
        that = this;
        
        that.bind('mouseenter.hoverDelay', function(e){
            delay = setTimeout(function(){
                over.call(that, e);
            }, ms);
        }).bind('mouseleave.hoverDealy', function(e){
            clearTimeout(delay);
            out.call(that, e);
        });
    };
    
})(jQuery);
        
$(function(){
    $('a').hoverDelay(function(){
        $('div').show();        
    }, function(){
        $('div').hide();    
    }, 1000);
    
    
});