JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="trigger1" class="layer-trigger" data-show-layer="#panel1">hover me</a>
<div id="panel1" class="layer-panel">I'm the not nested layer</div>

CSS

.layer-panel {
    width: 200px;
    height: 400px;
    padding: 5px;
 
    position: absolute;
    
    background: blue;
    color: white;
    display: none;
}

JavaScript

var handle = {
    enterTrigger: function(e) {
        console.log("showing layer");
        var $this = $(this),
            $panel = $($this.data('showLayer')),
            offset;        
        
        if ($panel.is(':visible')) {
            console.log("abort since already visible");
            return;
        }
        
        offset = $this.position();
        $panel
            .data('layerTrigger', $this)
            .css({
                top: offset.top + $this.height(),
                left: offset.left + 20
            })
            .show();
        
        $this.data('layerPanel', $panel);
    },
    leaveTrigger: function(e) {
        console.log("leaving trigger");
        var $this = $(this)
            $panel = $this.data('layerPanel');
        
        if (e.relatedTarget == $panel.get(0)) {
            console.log("abort since entering panel");
            return;
        }
        
        $panel.hide();
    },
    leavePanel: function(e) {
        console.log("leaving panel");
        var $panel = $(this)
            $trigger = $panel.data('layerTrigger');
        
        if (e.relatedTarget == $trigger.get(0)) {
            console.log("abort since entering trigger");
            return;
        }
        
        $panel.hide();
    }
    
};

$(document)
    .delegate('.layer-trigger', 'mouseenter', handle.enterTrigger)
    .delegate('.layer-trigger', 'mouseleave', handle.leaveTrigger)
    .delegate('.layer-panel', 'mouseleave', handle.leavePanel);