JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Hover over the elements</h2>
<ul>
  <li class="link">
    <span>Html</span>
  </li>

  <li class="link">
    <span>CSS</span>
  </li>
  
  <li class="link">
    <span>JavaScript</span>
  </li>
</ul>

CSS

li{text-decoration: none;position: relative;}
  .hover{position: absolute;top: 10px; left: 40px; background-color: #fff; border:1px solid #ccc;padding: 5px 10px; display: none;}
  li.link:hover .hover{display:block; z-index: 1;}

JavaScript

$('.link').one('mouseover', function() {
     var original = $(this).text();
        $(this).append('<div class="hover">'+original+'</div>');
    });