JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="hover">THIS IS THE ITEM TO HOVER</li>
</ul>

<div class="hover-el"></div>

CSS

ul { margin:50px; }
ul li { width:100px; height:100px; background:red; }

.hover-el { width:150px; height:150px; background:blue; position:absolute; top:0; left:0; display:none; }

JavaScript

var con = $('.hover-el'),
    item = $('#hover'),
    pos = item.offset(),
    x = pos.left,
    y = pos.top;

/*
    Makes no diffrence to bind to mouseleave outside of the mouseenter
*/

$('#hover').bind('mouseenter', function() {
    con.show().css({'top': x - 25, 'left': y - 25});
    con.one('mouseleave', function() {
        $(this).hide();
    });
});