JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>
        <button id="hoverme">Hover over me!
            <div class="popover">
               blah blah blah blah blah blah blah blah
            </div>
        </button>
    </p>
    <p>Try hoving over both te buttons, and move your mouse onto the bubble that appears.</p>
</div>
<div>
    <p>
        <button id="hoverme2">Hover over me!
        </button>
    </p>
    <div class="popover pop2">
        blah blah blah
    </div>
</div>

CSS

div{
    width:50%;
    float:left;
}
button{
    position:relative;
    background-color:#AA5300;
    color:#FFFFFF;
    padding:0.8em;
    border-radius:0.5em;
    display:inline-block;
    border:none;
}
div.popover{
    color:black;
    display:none;
    width:100px;
    position:absolute;
    left:0;
    top:101%;
    padding:0.5em;
    border-radius:0.5em;
    background-color:#CCCCCC;
    border:3px solid #AA5300;
}

JavaScript

$("#hoverme").on("mouseover", function(){
    $(this).children(".popover").show();
}).on("mouseout", function(){
    $(this).children(".popover").hide();
});

$("#hoverme2").on("mouseover", function(e){
    var target = $(e.target);
    $(".pop2").show().css({"position":"fixed",
                           "left":target.offset().left,
                           "top":target.offset().top + target.outerHeight()});
}).on("mouseout", function(){
    $(".pop2").hide();
});