JSFiddle - React, Tailwind, and code Playground

HTML

<a class="trigger">Come together, right now, Hover me</a>
<div class="tooltip">Hmmm</div>

CSS

body {background: #eee;}
.trigger {}
.tooltip {border: 1px solid #777; padding: 2em; background: #fff; display: none; position: absolute; top: 1em; left: 1em;}

JavaScript

var $tooltip = $('.tooltip'),
    bothSelector = '.trigger, .tooltip';
$('.trigger').mouseenter(function() {
        $tooltip.show();
});

$(bothSelector).mouseleave(function(e) {
    if ($(e.relatedTarget).is(bothSelector)) return;
        $tooltip.hide();
});