Jquery UI Datepicker beforeShowDay tooltip

Question

I found this thread about adding tooltip to disabled days on StackOverflow and could not figure out how to add it to my code.

I would be pleased if somebody could help me out.

My code so far:

beforeShowDay: function(disabledDates) {
  //Concatenating All dates before they are sent in to beforeShowDay
  var localDateArray = parsedDates.concat(addWeekendToDisabled(), disableToday(), disableTomorrow());

  var string = jQuery.datepicker.formatDate('yy-mm-dd', disabledDates);
  return [localDateArray.indexOf(string) === -1];

},

Here is from Jquery UI Datepicker official docs beforeShowDay here

beforeShowDay

Type: Function( Date date )
Default: null
A function that takes a date as a parameter and must return an array with:
[0] : true/false indicating whether or not this date is selectable
[1] : a CSS class name to add to the date's cell or "" for the default presentation
[2] : an optional popup tooltip for this date

Answer 1

Here is an old CodePen I made for another question...
The relevant code for your question is below.

CSS to re-enable pointer events on disabled dates:

pointer-events:initial !important;

Then, on beforeShowDay , when you return a false to disable a date, you also can return a class (for background-colors, for example AND the pointer-events) .
You can use that class to attach the right tooltip message, from an array, to the disabled dates.

So to attach the message, which has to be in the title attribute of the element, do something like this after the datepicker is instantiated:

$(document).find(".ui-state-disabled.red").attr("title",disabledReason[0]).tooltip();

---

Edit
It looks like after a date is selected, my trick doesn't work...
Because the DatePicker is re-drawn.

So here is the walk-around, using onSelect ans a setTimeout() :

 onSelect: function(){ setTimeout(function(){ $(document).find(".ui-state-disabled.red").attr("title",disabledReason[0]).tooltip(); $(document).find(".ui-state-disabled.green").attr("title",disabledReason[1]).tooltip(); },10); } 

It is working in this second CodePen .