JSFiddle - React, Tailwind, and code Playground

HTML

<div id="PlanningGrid">
    <ul class="dateBars">
        <li class="werfZone01"><label>Werfzone 01</label><span>nieuw deel R1-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 R2-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 R3-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 R5-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 R6-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 R7-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){
            var $this = $(this);
            $this.attr('id', 'dateBars'+i);
            $this.children('li').each(
            function() {
                /* CONFIG */        
                var xOffset = 10,
                    yOffset = 30, 
                /* END CONFIG */
                    
                    $bar = $(this),
                    $span = $bar.find('span').last();    
                            
                    $bar.hover(
                       function (e) {
                          var barPosition = $bar.position();
                          $span.
                             css("top",(e.pageY - barPosition.top + yOffset) + "px").
                             css("left",(e.pageX - barPosition.left + xOffset) + "px").
                             fadeIn("fast");                        
                       },
                       function () {                            
                          $span.fadeOut("fast");
                       }
                    ).mousemove(function (e) {
                        var barPosition = $bar.position();
                        $span.
                            css("top",(e.pageY - barPosition.top + yOffset) + "px").
                            css("left",(e.pageX - barPosition.left + xOffset) + "px");
                    });

                });            
            
        });        

})(jQuery);