JSFiddle - React, Tailwind, and code Playground

HTML

<div id="PlanningGrid">
    <ul class="dateBars">
        <li class="werfZone01"><label>Werfzone 01</label><span>nieuw deel R4-buitenring van HeerwegNoord in Gent-Zwijnaarde (aan de autokeuring) naar het Scheldekanaal (met op en afrittencomplaex Nieuwe Scheldestraat) <small>Mei 2012 - September 2013</small></span></li>
        <li class="werfZone02"><label>Werfzone 01</label><span>nieuw deel R4-buitenring van HeerwegNoord in Gent-Zwijnaarde (aan de autokeuring) naar het Scheldekanaal (met op en afrittencomplaex Nieuwe Scheldestraat) <small>Mei 2012 - September 2013</small></span></li>
        <li class="werfZone03"><label>Werfzone 01</label><span>nieuw deel R4-buitenring van HeerwegNoord in Gent-Zwijnaarde (aan de autokeuring) naar het Scheldekanaal (met op en afrittencomplaex Nieuwe Scheldestraat) <small>Mei 2012 - September 2013</small></span></li>
        <li class="werfZone04"><label>Werfzone 01</label><span>nieuw deel R4-buitenring van HeerwegNoord in Gent-Zwijnaarde (aan de autokeuring) naar het Scheldekanaal (met op en afrittencomplaex Nieuwe Scheldestraat) <small>Mei 2012 - September 2013</small></span></li>
        <li class="werfZone05"><label>Werfzone 01</label><span>nieuw deel R4-buitenring van HeerwegNoord in Gent-Zwijnaarde (aan de autokeuring) naar het Scheldekanaal (met op en afrittencomplaex Nieuwe Scheldestraat) <small>Mei 2012 - September 2013</small></span></li>
        <li class="werfZone06"><label>Werfzone 01</label><span>nieuw deel R4-buitenring van HeerwegNoord in Gent-Zwijnaarde (aan de autokeuring) naar het Scheldekanaal (met op en afrittencomplaex Nieuwe Scheldestraat) <small>Mei 2012 - September 2013</small></span></li>
        <li class="werfZone07"><label>Werfzone 01</label><span>nieuw deel R4-buitenring van HeerwegNoord in Gent-Zwijnaarde (aan de autokeuring) naar het Scheldekanaal (met op en afrittencomplaex Nieuwe Scheldestraat) <small>Mei 2012 - September 2013</small></span></li>
        <li class="werfZone08"><label>Werfzone...

CSS

#PlanningGrid { width:700px; height:400px; position:relative;}

ul.dateBars{ 
    position: relative; 
    list-style:none; 
    top:45px; 
    left:0;
    height: 400px; 
    margin:0;
    padding:0;
    z-index:10 }

.dateBars li { 
    height:33px; 
    line-height:15px; 
    background:red; 
    margin:0 0 11px; 
    text-indent:-99999px; 
    position:relative;
}

.dateBars span { 
    position: absolute;
    background-color:#d28645;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d28645, endColorstr=#c76918);
    background-image:-moz-linear-gradient(top, #d28645 0%, #c76918 100%);
    background-image:-webkit-linear-gradient(top, #d28645 0%, #c76918 100%);
    background-image:-ms-linear-gradient(top, #d28645 0%, #c76918 100%);
    background-image:linear-gradient(top, #d28645 0%, #c76918 100%);
    background-image:-o-linear-gradient(top, #d28645 0%, #c76918 100%);
    background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#d28645), color-stop(100%,#c76918));
    padding:0 10px 0 41px;
    width: 268px;
    text-indent:99999px;
    display:none;
    color:#fff;
    z-index:2000;
}

#dateBars0 .werfZone01 { width: 323px;    left: 76px;}
#dateBars0 .werfZone02 { width: 286px;    left: 228px;}
#dateBars0 .werfZone03 { width: 343px;    left: 76px; }
#dateBars0 .werfZone04 { width: 189px;    left: 324px;}
#dateBars0 .werfZone05 { width: 153px;    left: 114px;}
#dateBars0 .werfZone06 { width: 170px;    left: 114px;}
#dateBars0 .werfZone07 { width: 18px;    left: 96px;    }
#dateBars0 .werfZone08 { width: 18px;    left: 134px;}

JavaScript

(function($){

         
    
        $(".dateBars").each(function(i){
            $(this).attr('id', 'dateBars'+i);
            $(this).children('li').each(
            function(){
                /* CONFIG */        
                xOffset = 10;
                yOffset = 30;                    
                /* END CONFIG */                
                    $(this).hover(function(e){
                        $(this).contents("span:last-child")
                            .css("top",(e.pageY - xOffset) + "px")
                            .css("left",(e.pageX + yOffset) + "px")
                            .fadeIn("fast");                        
                    },
                    function(){                            
                        $(this).contents("span:last-child").fadeOut("fast");
                    });    
                    $(this).mousemove(function(e){
                        $(this).contents("span:last-child")
                            .css("top",(e.pageY - xOffset) + "px")
                            .css("left",(e.pageX + yOffset) + "px");
                    });

                });            
            
        });        

 
    
})(jQuery);