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;
height:10px; 
background-color:#666666;
display:hidden;
display: inline;
float: left;
}

ul{
display: inline;
float: left;   
}

JavaScript

$(".bubble").live({
           mouseenter : function() {

               $("#bubble").show();
               $("#bubble").html($(this).attr('id'));
               
               
            },
            mouseleave : function() {
             $("#bubble").empty();
                
            }
  });