JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_body">
    <div id="hoverdiv"></div>    
     <div style="margin:0 auto; position: relative;">
        <div class="hover" hovertext="This is div 1">Div 1</div>
        <div class="hover" hovertext="This is div 2">Div 2</div>
        <div class="hover" hovertext="This is div 3">Div 3</div>
    </div>
</div>

CSS

#hoverdiv{
    display:none;
    position:absolute;
    font-size:12px;
    background: rgba(0,0,0,.6);
    color: #DDD;
    border: 1px solid #999;
    padding:10px;
    z-index:10000;
}

#main_body{
     width:900px;
     background-color: rgba(194,206,231,.5);
     padding:50px;
     box-shadow:0 0 5px rgba(194,206,231,1);     
     overflow:auto;  
     position:relative;
     top:110px;
     margin:0 auto;
}

JavaScript

$(document).on('mousemove','.hover',function(e){   

    var hovertext = $(this).attr('hovertext');
    $('#hoverdiv').text(hovertext)
    .css('top',e.pageY - $('#main_body').offset().top)
    .css('left',e.pageX - $('#main_body').offset().left)
    .show();

 }).on('mouseout','.hover',function(){       
 $('#hoverdiv').hide();      
 });