JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tagged"></div>
<div id="taggeditem"></div>

CSS

div{height:100px; width:100px; border:4px solid red;}
#taggeditem{display:none;}

JavaScript

$(function()
{
    var timeoutId;
      
    $('.tagged').on({
        mouseenter: function () {
            $('#taggeditem').fadeIn(200);
        },
        mouseleave: function () {
          timeoutId = setTimeout(function(){
              $('#taggeditem').fadeOut(200);
            }, 600);

        }
    });

      $('#taggeditem').on({
            mouseenter: function () {
                clearTimeout(timeoutId);
            },
            mouseleave: function () {
               timeoutId = setTimeout(function(){
                  $(this).fadeOut(200);
               }, 600);
            }
       });      
  });