JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<div class="container">
<ul>
     <li>
             <a href="#"></a>
            <div class="tooltip">TOOLTIP POPUP</div>
     </li>
    <li>
         <a href="#"></a>
        <div class="tooltip">TOOLTIP POPUP</div>
     </li>
    <li>
             <a href="#"></a>
            <div class="tooltip">TOOLTIP POPUP</div>
     </li>
    <li>
         <a href="#"></a>
        <div class="tooltip">TOOLTIP POPUP</div>
     </li>
    <li>
         <a href="#"></a>
        <div class="tooltip">TOOLTIP POPUP</div>
     </li>
    <li>
         <a href="#"></a>
        <div class="tooltip">TOOLTIP POPUP</div>
     </li>
 </ul>
</div>
   
<div class="clear"><!-- --></div>

<div class="container">    
 <ul>
     <li>
         <a href="#"></a>
        <div class="tooltip">TOOLTIP POPUP</div>
     </li>
    <li>
         <a href="#"></a>
        <div class="tooltip">TOOLTIP POPUP</div>
     </li>
    <li>
         <a href="#"></a>
        <div class="tooltip">TOOLTIP POPUP</div>
     </li>
    <li>
         <a href="#"></a>
        <div class="tooltip">TOOLTIP POPUP</div>
     </li>
    <li>
         <a href="#"></a>
        <div class="tooltip">TOOLTIP POPUP</div>
     </li>
    <li>
         <a href="#"></a>
        <div class="tooltip">TOOLTIP POPUP</div>
     </li>
 </ul>
</div>

CSS

.container {
    width: 500px;   
    margin-bottom: 20px;
}
.clear{ clear: both; }
ul {
    margin: 0px;
    padding: 0px;
}
 ul li {
       width: 50px;
       height: 35px;
       position: relative;
       float: left;
       margin: 0px 5px 5px 0px;
       border: 1px solid orange;
       list-style-type: none;
       z-index: 9999;
}
ul li a {
     background: green;
     width: 50px;
     height: 35px;
     display: block;    
}
 div.tooltip {
       width: 300px;
       height: 300px;
       background: blue;
       position: absolute;
       top: 20px;
       left: 20px;
       z-index: 1000;
       display: none;
 }

JavaScript

$(document).ready(function() {
      $('ul li').hover(
           function(){
            //$('div.tooltip', this).css('z-index', '9000');
            $('div.tooltip', this).stop(true,true).show();
        },
        function() {
            $('div.tooltip', this).hide();
            //$('div.tooltip', this).css('z-index', '1000');
        });
    
$("ul li").each( 
    function(index) { 
        $(this).css( "z-index", index*2+2 ); 
    } 
);


});