JSFiddle - React, Tailwind, and code Playground

HTML

<div class="avatar"><a>Avatar Image 1<div style="display:none" class="profile">Tool Tip 1 with Link</div></a></div>
<div class="avatar"><a>Avatar Image 2<div style="display:none" class="profile">Tool Tip 2 with Link</div></a></div>
<div class="avatar"><a>Avatar Image 3<div style="display:none" class="profile">Tool Tip 3 with Link</div></a></div>

CSS

.profile {
	width: 150px;
	border: solid 1px #333;
	background: #EEE;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 9pt;
	padding: 6px;
}

JavaScript

$('.avatar a').on('mouseleave', function() {
    var $tip = $(this).contents('div:last-child');
	$tip.data('hover', setTimeout(function() {
		$tip.fadeOut(400);
        $tip.data('hover') = null;
    }, 300));
});

$('.avatar a').on('mouseenter', function() {
	var $tip = $(this).contents('div:last-child').show();
    var hover = $tip.data('hover');
	if (hover) {
		clearTimeout(hover);
        $tip.data('hover') = null;
    }
});