JSFiddle - React, Tailwind, and code Playground

HTML

<head>
</head>
<body>
 <div id="popupContact"  style="position:absolute;left:100px;top:100px;width:100px;height:50px;background-color:orange;border:1px solid red ;">
 </div>

</body>

CSS

div {
    width: 50px;
    height: 50px;
    background-color: black;
    color: white;
}

JavaScript

$(document).ready(function(){
 var popup_pos=$('#popupContact').offset();
 var timer;
  $("#popupContact").mouseenter(function() {
   $("#popupContact").append('<div id="divtoshow" style="display:block;background-color:green; border:1px solid black;width:200px;height:100px;position:absolute;">'+
 'dsfdssd <div><a href="#">rahul</a></div>'+
 '</div>')
    $("#divtoshow").css('position',"absolute"); 
    $("#divtoshow").css('top',popup_pos.top-120); 
    $("#divtoshow").css('left',popup_pos.left-120); 
     //~ $("#popupContact").hide();
   //~ }

  //~ }, 1000);

 });
 //~ $("#popupContact").mouseleave(function() {
  //~ if(timer) { clearTimeout(timer); timer = null; } 
 //~ });

 $("#divtoshow").live('mouseleave', function() {
   //~ if(timer) {
    //~ clearTimeout(timer);
    //~ timer = null
         //~ }
   //~ timer = setTimeout(function() {
    $(this).hide();
     //~ $("#popupContact").show();

   //~ }, 500);
 });
});