JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<div class="progressOuter">
    <div class="inner-left-bar"> <span class="showDiv">Hello</span>
        <div class="toolTip">
           How are you?
        </div>
    </div>
    <div class="inner-middle-bar">
        <span class="showDiv">Welcome</span>
        <div class="toolTip">
            To the World!
        </div>
    </div>
    <div class="inner-right-bar">
        <span class="showDiv">Coding</span>
        <div class="toolTip">
            Coding is poetry
        </div>
    </div>
</div>

CSS

.progressOuter {
    background: #fff;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    
}
.inner-left-bar {
    height:100%;
    background:green;
    width:33.333%;
    float:left;
    text-align:center;
    
}
.inner-middle-bar {
    height:100%;
    background:orange;
    width:33.333%;
    float:left;
    text-align:center;
}
.inner-right-bar {
    height:100%;
    background:#ccc;
    width:33.333%;
    float:left;
    text-align:center;
}
.toolTip
{
    font-family:Arial;
    font-size:13px;
    display:none;
    z-index:999;
    position: absolute;
    background-color:#333;
    padding:4px;
    color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    3px 3px 5px rgba(50, 50, 50, 0.75);
box-shadow:         3px 3px 5px rgba(50, 50, 50, 0.75);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}

JavaScript

$(document).ready(function () {
     $(".showDiv").hoverIntent({ // capture the link hover events
         over: function () {
             var $sibling = $(this).siblings('.toolTip').fadeIn(300); // get the sibling div and show it
             $('.toolTip').not($sibling).fadeOut(300); // hide the other divs
             $sibling.data('linkOver', true); // store the fact that the link triggered this
         },
         out: function () {
             var $sibling = $(this).siblings('.toolTip');
             $sibling.data('linkOver', false);
             if ($sibling.data('divOver') !== true) { // only hide if the mouse isn't on the div
                 $sibling.delay(200).fadeOut(500); // get the sibling div and hide it after .333 seconds
             }
         },
         timeout: 500 //time to fire the event - must be greater than div.hover's timeout                  
     });

     $(".toolTip").hoverIntent({ //capture the div hover events
         over: function () {
             $(this).data('divOver', true); // store the fact we're over the div now
         },
         out: function () {
             var $div = $(this);
             $div.data('divOver', false);
             if ($div.data('linkOver') !== true) { // if we're not on the link
                 $(this).delay(200).fadeOut(500); // then hide the div
             }
         },
         timeout: 400
     });
 });