JSFiddle - React, Tailwind, and code Playground

by blackhawx

HTML

<div id="wrapper">

<ul>
  <li>
    <a href="/">Square A</a>
    <div>New Square A</div>
  </li>

  <li>
    <a href="/">Square B</a>
    <div>New Square B</div>
  </li>

  <!--//...then just continue this <li></li> pattern 12 times//-->
</ul>

<hr>

</div>

CSS

#wrapper {
padding: 0;
margin: 0;
position: relative;
width: 960px;
top:200px;
}

#wrapper ul li {
padding:10px;
margin:0;
display:inline;
float:left;
}

#wrapper ul li div {
padding: 0;
margin: 0;
width: 75px;
height:75px;
border:solid 5px #f0f0f0;
clear: both;
position: absolute;
z-index: 9999;
top: -75px;
display: none;
}

hr {
padding:0;
margin:0;
height:0;
clear:both;
}

JavaScript

//create your initial timer variable as null
    var myTimer = null;

  //when you hover over any link in your list...
    $('#wrapper ul li a').hover(function(){

    //...get ready to fade in the <div> element next to it!
      var tooltip = $(this).next('div');    
        if(!tooltip.is(':visible')) {tooltip.fadeIn("fast");}   
    },function() {
     //...when you get move your mouse off, then fade it out (hide) with a custom delay
         var tooltip = $(this).next('div'); 
         myTimer = setTimeout(function(){tooltip.hide();},200);
    });

  //also, when you hover over your new square...
    $('#wrapper ul li div').hover(function() {

    //...either keep it up
        clearTimeout(myTimer);

        },function() {  

    //or fade it out!
        $(this).fadeOut("fast");    
    });