JSFiddle - React, Tailwind, and code Playground

by grc4

HTML

<div class="hovercard"><div class="hovercontent">Hovercard goes in this grey gox, but it won't disappear until the mouse leaves the larger box with the blue border (which would normally be hidden).</div></div>

<div class="profile"></div>

<br><br>

<div class="profile"></div>

CSS

.profile {
    margin: 50px;
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}

.hovercard {
    display: none;
    position: absolute;
    width: 400px;
    height: 150px;
    padding: 20px 20px 20px 90px;
    border: 1px solid blue;
}
.hovercontent {
    background: #eee;
    width: 400px;
    height: 150px;
}

JavaScript

var timeout;

$('.profile').hover(function() {

    pos = $(this).offset();

    timeout = setTimeout(function() {

        $('.hovercard').fadeIn().css({
            'top': pos.top - 20 + 'px',  // subtract 20px to account for padding
            'left': pos.left - 20 + 'px'
        });

    }, 1000);

}, function() {
    clearTimeout(timeout);
});

$('.hovercard').mouseleave(function() {
    $('.hovercard').fadeOut();
});