JSFiddle - React, Tailwind, and code Playground

by Aki143S

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;
position:relative;
display:inline-block;
    
}

JavaScript

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