JSFiddle - React, Tailwind, and code Playground

by lnrb0b

HTML

<div id="wbscal" class="ie8"><br />
    <div class="table">
        <div class="wbscal_row" data-ym="2011-12">
            <div class="wbscal_avail"><div class="wbscal_avail"></div></div>
            <div class="wbscal_semi"><div></div></div>
            <div class="wbscal_full"><div></div></div>
            <div class="wbscal_avail"><div></div></div>
            <div class="wbscal_full"><div></div></div>
            <div class="wbscal_full"><div></div></div>
            <div class="wbscal_avail"><div></div></div>
            <div class="wbscal_semi"><div></div></div>
            <div class="wbscal_semi"><div></div></div>
        </div>
        <br />
        <div class="wbscal_tooltip">
            <div class="wbscal_tooltip_text"></div>
            <div class="wbscal_icon_arrival"></div>
            <div class="wbscal_icon_departure"></div>       
        </div>
    </div>
</div>

CSS

/* base styles */
/* the important :before/:after ones are all the way down */
#wbscal > div.table {
    position: relative;
}

#wbscal .wbscal_row {
    margin:0px;
    text-align:center;
    font-size:10px;
    clear:both;
}

#wbscal .wbscal_row > div {
    float: left;
    text-align:center !important;
    width:12px;
    height:12px;
    
    font-size:10px;
    background-color:#fff;
    vertical-align:middle!important;
    padding:0;
    margin:0;
    overflow:hidden;
    cursor: pointer;
    border-radius: 2px;
    -moz-border-radius: 2px;
    border:1px solid #565656;
    margin-right: 1px;
    margin-bottom:1px;    
}

#wbscal .wbscal_row > div > div {
    height: 0px;
    width: 0px;
    border-style: solid;
    border-color: transparent;
    cursor: pointer;
    border-width: 6px; 
}

#wbscal .clearfix {
    clear: both;
    line-height: 1px;
    font-size: 1px;
    height: 1px;
    visibility: hidden;
}


/*  -------------------------------  */
/* ---   TABLE CELLS: COLORS     --- */



/* Date  Highlight : Header > .Hover, IE8 > .HoverC, :not(IE8) .hover        */
/* Separate non-IE8 Delcaration because IE8 discards rules containing :not() */
#wbscal .wbscal_date > .wbscal_hover,
#wbscal .wbscal_row.wbscal_hover .wbscal_label {
    background-color: #ffcc33;
}
#wbscal:not(.ie8) .wbscal_row:hover .wbscal_label {
    background-color: #ffcc33;
}

/* ---------------------------------- */

/* Arrival (main): Green */
.wbscal_legend .wbscal_avail,
#wbscal .wbscal_row > div.wbscal_avail {
    background-color: #9fc850; 
}

/* -------------------------------------- */

/* Arrival (main): Yellow */
.wbscal_legend .wbscal_semi,
#wbscal .wbscal_row > .wbscal_semi {
    background-color: #f8b333;
}

/* ------------------------------------------------------------------------------- */

/* Arrival (main): Red */
.wbscal_legend .wbscal_full,
#wbscal .wbscal_row > .wbscal_full {
    background-color: #ff0000;
}

/* - DEPARTURE INDICATIONS ------- */
/*...

JavaScript

/* jq plugins, ignore */
(function($){"use strict";var singleElement=$([1]);function single(element){var i,len;if(element instanceof $||element instanceof Array){singleElement[0]=element[0];}else{singleElement[0]=element;}return singleElement;}if(!$.single){$.single=single;}}($));(function($){"use strict";function throttle(action,timeout,renewTimeout){var timeoutRef=0,isset=false;renewTimeout=!!renewTimeout;function clear(){if(isset){clearTimeout(timeoutRef);isset=false;}}function fire(dontClear){action();if(!dontClear){clear();}}function set(renewLocal){renewLocal=typeof renewLocal==="undefined"?renewTimeout:!!renewLocal;if(isset){if(renewLocal){clear();set();}return;}isset=true;timeoutRef=setTimeout(fire,timeout);}return{set:set,clear:clear,fire:fire};}$.wbs_throttle=throttle;}($));




 (function ($) {
     var $container = $('#wbscal'),
         $table = $('.table'),
         $tooltip = {},
         tooltipTargetElement = null,
         tooltipShowTimeout,
         tooltipHideTimeout,

     cellMouseIn = function () {
        tooltipTargetElement = this;
        tooltipHideTimeout.clear();
        tooltipShowTimeout.set();
     },
     cellMouseOut = function () {
        tooltipShowTimeout.clear();
        tooltipHideTimeout.set();
        tooltipTargetElement = null;
     },
     hideTooltip = function () {
         $tooltip.container.hide();
     },
     showTooltip = function () {
         var target = tooltipTargetElement;
         $tooltip.arrival.
                removeClass('wbscal_avail wbscal_semi wbscal_full').
                addClass(target.className.match(/\b(wbscal_avail|wbscal_semi|wbscal_full)\b/)[1]);
            $tooltip.departure.
                removeClass('wbscal_avail wbscal_semi wbscal_full').
                addClass((target.getElementsByTagName('div')[0].className || $.single(target).prev()[0].className).match(/\b(wbscal_avail|wbscal_semi|wbscal_full)\b/)[1]);

            $tooltip.container.show();
     };
     
    
    ...