JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body">
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    surrounding text<br/>
    <div id="pane" style="overflow: auto; height: 400px; width: 400px;">
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        lots and lots of text here<br/>
        <span id="some_bit">tooltip appears below-right of this</span>
        lots and lots of text here<br/>
       ...

CSS

#pane {
    background-color: red;
}

#tooltip {
    z-index: 9999;
    display: block;
    position: fixed;
    background-color: yellow;
}

JavaScript

$('#some_bit').hover(function() {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    
    // hovered element 
    var offset = $(this).offset();
    var top = offset.top;
    var left = offset.left;
    var width = $(this).width();
    var height = $(this).height();
    var right = left + width;
    var bottom = top + height;
    
    // tooltip
    var ttop = bottom;
    var tleft = right;
    var twidth = $('#tooltip').width();
    var theight = $('#tooltip').height();
    var tright = tleft + twidth;
    var tbottom = ttop + theight;
    
    if (tbottom > docViewBottom)
        ttop = docViewBottom - theight;
    $('#tooltip').offset({top: ttop, left: tleft});
});