JSFiddle - React, Tailwind, and code Playground

by Vanss472

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://019d5dc.netsolhost.com/WAG/farmacia/js/jquery.tooltip.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />



<div id="datepicker"></div>

CSS

.blue > a {
    background-color: #81b3d4 !important;
    background-image:none !important;
}

#tooltip.speech-bubble {
  position: absolute;
  z-index: 3000;
  padding: 5px;
  background-color: #0f77bc;
      -moz-box-shadow:inset 0px 4px 7px #3ea9de;
    -webkit-box-shadow:inset 0px 4px 7px #3ea9de;
    box-shadow:inset 0px 4px 7px #3ea9de;



  width: 200px;
  height: 150px;
  line-height: 100px; /* vertically center */

  color: white;
  text-align: center;
  border-radius: 0px;
  border: 1px solid #2a67b5;

  font-family: sans-serif;
}

#tooltip.speech-bubble:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 15px solid;
}

/* Position the Arrow */

 
#tooltip.speech-bubble-bottom:after {
  border-top-color: #0f77bc;
  

  top: 100%;
  left: 50%;
  margin-left: -15px;
}

JavaScript

$(document).ready(function() {
      // Datepicker
    var Event = function(text, className) {
    this.text = text;
    this.className = className;
};

var events = {};
events[new Date("04/23/2012")] = new Event("Valentines Day", "blue");
events[new Date("04/26/2012")] = new Event("Payday", "blue");
events[new Date("04/27/2012")] = new Event("Home", "blue");
events[new Date("04/28/2012")] = new Event("Home", "blue");

console.dir(events);

$("#datepicker").datepicker({
                    inline: true,
                    dateFormat: "yy-mm-dd",
                    minDate: new Date(2012, 4 - 1, 1),
                    maxDate: new Date(2012, 4 - 1, 30) ,
    beforeShowDay: function(date) {
        var event = events[date];
        if (event) {
            return [true, event.className, event.text];
        }
        else {
            return [true, '', ''];
        }
    }
});

$('#datepicker td').tooltip({
    extraClass: "speech-bubble speech-bubble-bottom",
    top: 300 
    });
    
    
                    
  });