JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

ul li div {
 width:100px;
 height:10px;
 background-color:#666666;
 position:absolute;  
 display:none;
}

ul li:hover div {
 display:inline;   
}