JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tooltip">
    <div class="content">
        <p>Hi, what's up</p>
    </div>
    <div class="tip"></div>
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend placerat enim non semper. Fusce ullamcorper gravida ipsum, vel feugiat lectus aliquet eget. Nullam tellus nibh, lobortis quis vestibulum ac, suscipit et tellus. Nam nec volutpat nisl. Cras sagittis turpis ac nunc ornare varius venenatis odio auctor. Pellentesque posuere vulputate nisl, tristique imperdiet orci pulvinar ac. Mauris a interdum augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum semper laoreet neque rutrum lacinia.
</p>
            <h3>Section</h3>
            <p>
Nam orci risus, vestibulum a semper non, consequat sed dui. Nam lobortis, lorem quis consectetur congue, urna velit posuere tortor, ut volutpat nisi velit quis justo. Sed tincidunt vestibulum felis et consequat. Ut sit amet felis ante, non malesuada risus. Duis ultrices, diam sit amet tincidunt interdum, lectus metus volutpat sapien, id mollis massa magna facilisis ligula. In semper enim id nibh dapibus eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut velit orci. Suspendisse auctor mauris augue, fermentum imperdiet arcu. Curabitur et felis risus, sed auctor lectus. Nam quam ante, ullamcorper non malesuada a, ullamcorper eu magna. Quisque nibh felis, eleifend et ultrices eu, imperdiet sed arcu. Sed nunc urna, porttitor nec rutrum a, pretium vulputate metus. Vestibulum vitae dolor mauris, eget tempus enim. Suspendisse vitae lectus risus, et dapibus metus.
</p><p>
Maecenas laoreet hendrerit ultrices. Morbi ac sollicitudin sapien. Suspendisse ac erat ipsum. Curabitur quis volutpat velit. Sed aliquet justo nec leo tempor congue. Nullam diam augue, condimentum id faucibus eget, hendrerit in enim. Nam eu massa felis, sit amet luctus augue. Nullam rutrum semper lacinia.
</p><p>
    Praesent...

CSS

.tooltip {width: 250px; height: 80px; border: 1px solid #777; background: #fff4c2; position: absolute; display: none;}
.tooltip .content {padding: 10px;}
.tooltip .tip {width: 10px; height: 10px; background: red; position: absolute; top: 50%; left: -3px;}

h3 {display: inline-block; background: red;}

JavaScript

function showTooltip(e){
    var $tooltip = $('.tooltip');
    var $this = $(e.target);
    var thisLeft = $this.position().left;
    var thisRight = thisLeft + $this.width();
    var thisTop = $this.position().top;
    $tooltip.css({
        'left': thisRight + 5 + 'px',
        'top': thisTop - ($tooltip.height() / 2) + 'px'
    });
    $tooltip.toggle();
}

function hideTooltip(e){
     var $tooltip = $('.tooltip');
     $('.tooltip').toggle();
}

$('h3').hover(showTooltip, hideTooltip);