JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<div id="tablebarWp">
<table>
<thead>
<tr>
<th>1965</th>
<th>1975</th>
<th>1985</th>
<th>1995</th>
<th>2005</th>
<th>2015</th>
</tr>
</thead>
</table>
</div>
<div style="position: relative; margin-top: 25px; background-image: url('http://englishliteraturebythebook.co.uk/wp-content/uploads/2015/07/blueSpineBook.png'); width: 100%; height: 82px;" id="book1"><span class="info_span1"></span> <span class="info_span2"></span> <a href="#" style="display: block; position: absolute; height: 100%; width: 6%; top: 0px; left: 46%; overflow: hidden;" onmouseover="this.style.backgroundColor=' rgba(0, 0, 0, 0.5)';" data-title1="1988" data-title2="1990" onmouseout="this.style.backgroundColor='';"></a><p style="
    padding: 10px;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
">On the Black Hill</p></div>
<div style="position: relative; margin-top: 25px; background-image: url('http://englishliteraturebythebook.co.uk/wp-content/uploads/2015/07/greySpineBook.png'); width: 100%; height: 82px;" class="bookclass" id="book2"><span class="info_span1"></span> <span class="info_span2"></span> <a href="#" style="display: block; position: absolute; height: 100%; width: 1%; top: 0px; left: 46%; overflow: hidden;" onmouseover="this.style.backgroundColor=' rgba(0, 0, 0, 0.5)';" data-title1="" data-title2="1989" onmouseout="this.style.backgroundColor='';"></a> <a href="#" style="display: block; position: absolute; height: 100%; width: 6%; top: 0px; left: 53%; overflow: hidden;" onmouseover="this.style.backgroundColor=' rgba(0, 0, 0, 0.5)';" data-title1="1994" data-title2="1995" onmouseout="this.style.backgroundColor='';"></a> <a href="#" style="display: block; position: absolute; height: 100%; width: 10%; top: 0px; left: 62%; overflow: hidden;" onmouseover="this.style.backgroundColor=' rgba(0, 0, 0, 0.5)';" data-title1="1998" data-title2="2004" onmouseout="this.style.backgroundColor='';"></a><p style="
    padding: 10px;
    font-size: 32px;
    font-weight: 700;
    color:...

CSS

#theme-page {
    background-color: #F7F7F7;
}




#tablebarWp table{
    width:100%;
    overflow: visible !important;
} 
#tablebarWp table thead tr th {
    position:relative;
}
#tablebarWp table thead tr th:after {
    content: ' ';
    border-left:2px solid #cccccc;
    left:50%;
    height:9290%;
    position:absolute;
    display:block;
    top:100%;
 }
#tablebarWp table thead tr th:first-child:after{
    height:9290%;
  
}


#tablebar table thead tr th:last-child:after {
    height:4900%;
    z-index: 1;
}



#tablebarWp tr:nth-of-type(odd) { 
  background: #fff; 
}
#tablebarWp th { 
  background: #F7F7F7; 
  color: black; 
  font-weight: bold; 
}
#tablebarWp td, th { 
  padding: 6px; 
text-align: center !important;

}

#tablebarWp{
padding-top: 39px;
}


html,body{
margin:0px auto;
}



.info_span1 .info_span2{
    display:none;
  text-align:center;
    
    
}




.info_span2{
  display:none;
  width:28px;
  left: auto;
  right: 0; 
  background: #000 none repeat scroll 0 0;
  padding: 3px;
  position: fixed;
  border-radius: 4px;
  z-index: 1;  
  font-size:11px; 
  color:#fff;
    font-weight:700;
  
}

.info_span2:after{
  left: 0px;
  right: auto; 
  border-color: transparent transparent #000;
    border-style: solid;
    border-width: 6px;
    bottom: 100%;
    content: "";
    position: absolute;
    margin-bottom: -1px;
     z-index: 1;
}
.info_span1{
  display:none;
  width:28px;
    background:#000;
    padding: 3px;
    position: absolute;
  border-radius: 4px;
     z-index: 1;
    font-size:11px;
    color:#fff;
    font-weight:700;
   
}
.info_span1:after{
    border-color: transparent transparent #000;
    border-style: solid;
    border-width: 6px;
    bottom: 100%;
    content: "";
    left: 0px;
    position: absolute;
    margin-bottom: -1px;
     z-index: 1;
    padding-bottom:10px
}

JavaScript

var $j = jQuery.noConflict();

$j(document).ready(function(){
    
  $j( 'a' ).mouseout(function(){
      var book_id=$j(this).parent().attr('id');
    $j('#'+book_id).children('.info_span1').hide();
$j('#'+book_id).children('.info_span2').hide();
  });
  
    $j('a').mouseenter(function(){
        var book_id=$j(this).parent().attr('id');
        var position = $j(this).position();
       
        $j('#'+book_id).children('.info_span1').show();$j('#'+book_id).children('.info_span2').show();
        $j('#'+book_id).children('.info_span1').text($j(this).data("title1"));
        $j('#'+book_id).children('.info_span2').text($j(this).data("title2"));
        $j('#'+book_id).children('.info_span1').css({top: $j(this).height()-6, left:position.left, position:'absolute'});
        $j('#'+book_id).children('.info_span2').css({top: $j(this).height()-6, left:position.left+$j(this).width(), position:'absolute'});
       
    });
});