JSFiddle - React, Tailwind, and code Playground

by cambraca

HTML

<div id="profile" class="menu-item" onclick="window.location = 'profile.php'">Profile</div>

<div id="profile-tip" class="tip">
    **insert menu options**
</div>

<div id="search" class="menu-item" onclick="window.location = 'search.php'">Search</div>

<div id="search-tip" class="tip">
    **insert menu options FOR SEARCH**
</div>

CSS

.tip {display: none;}
div {border: 1px solid red; margin: 10px; padding: 10px;}

JavaScript

$(".menu-item").hover(
    function() {
        $('#' + this.id + '-tip')
            .data('hover', true)
            .fadeIn("fast")
            .show();
    },
    function() {
        $('#' + this.id + '-tip')
            .data('hover', false);
        setTimeout('hideTip("' + this.id + '-tip");', 200);
    }
);
$(".tip").hover(
    function() {
        $(this).data('hover', true);
    },
    function() {
        $(this).data('hover', false);
        setTimeout('hideTip("' + this.id + '");', 200);
    }
);
function hideTip(id) {
    alert(id);
    if (!$('#' + id).data('hover'))
        $('#' + id).hide();
}