JSFiddle - React, Tailwind, and code Playground

by bruno

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

$(".bubble").hover( function( ) {
    var offset = $(this).offset();
    
    $("#bubble").html($(this).attr('id'))
        .css({ top: offset.top, left: offset.left + $(this).width() })
        .show();
}, function( ) {
    $("#bubble").html("").hide();
});