JSFiddle - React, Tailwind, and code Playground

HTML

asdfasdf<Br />
asdfdsfasdf askjhfaskjdhf <br />
aksjhfkjhasdf<br />
<br/><br/><br/>

<div id="text">Roll the mouse over me!</div>

<div id="popup">popup</div>

CSS

#popup{height: 50px; width: 150px; background-color:#d3d3d3; display: none; position: absolute; top:-100px; left:0;}

JavaScript

$(document).ready(init);

function init(){
    $("#text").mouseover(function(){            
          $("#popup").css("top",parseInt($(this).offset().top)-parseInt($("#popup").height()));
$("#popup").show();            
    });        
    
        $("#text").mouseout(function(){
           $("#popup").hide(); 
        });
}