JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>
    <span class="bubble" id="test1">test1</span>
</li>
<li>
    <span class="bubble" id="test2">test2</span>
</li>
<li>
    <span class="bubble" id="test3">test3</span>
</li>
    <li>
    <span class="bubble" id="test4">test4</span>
</li>
    <li>
    <span class="bubble" id="test5">test5</span>
</li>
</ul>


<div id="bubble"></div>

CSS

#bubble{
    width: 100px;
    background-color:#666666;
    position:absolute;
    display:hidden;    
}

JavaScript

$("ul").on('hover', '.bubble', function(e) {
    if (e.type == 'mouseenter') {
        var $el = $(this);
        $("#bubble")
            .html($el.attr('id'))
            .css({
                top: $el.offset().top,
                left: $el.offset().left + $el.width()
            })
            .show();
    }
    else {
        $("#bubble").empty();
    }
});