JSFiddle - React, Tailwind, and code Playground

by akoptsov

HTML

<div id="hover">hover</div>
<div id="popup" class="hidden">popup</div>

CSS

.hidden {
    display:none;
}

.visible{
    width:50px;
    border: solid 1px;
}

JavaScript

var hover = document.getElementById("hover");
var popup = document.getElementById("popup");

var delay = 1000;
var hovering;
hover.onmouseover = function(event){
    hovering = setTimeout(function(){
        show();
    },delay);
};

hover.onmouseout = function(event){
    if(hovering){
        clearTimeout(hovering);
    }
    hide();
}

function hide(){
    popup.className='hidden';
}
function show(){
    popup.className='visible';
}