Avatar of dzash2000
dzash2000
Flag for United States of America asked on

How do I add HTML to this datepicker tool tip?

Hi - I am not a javascript programmer but I can cut and paste with the best of 'em. ;)
I found the code below to generate tooltips over specified dates on a jquery datepicker.  It works superbly for short text strings but I'd like to add more html functionality such as: line break tags, and links.


<script language="JavaScript" type="text/javascript">$(function() {
    // format: specialDays.year.month.day
    var specialDays = {
      '2011': {
        '1': {'1': {tooltip: "New Year's Day", className: "holiday"}},
        '4': {
          '10': {tooltip: "Good Friday", className: "holiday"},
          '13': {tooltip: "Easter Monday", className: "holiday"}
        },
        '5': {
          '4': {tooltip: "Early May Bank Holiday, 9-6,"+<br />+"1120 Mill Road, Egg Harbor Twp", className: "holiday"},
          '15': {tooltip: "Spring Bank Holiday", className: "holiday"}
        },
        '8': {'31': {tooltip: "Summer Bank Holiday", className: "holiday"}},
        '12': {
          '25': {tooltip: "Christmas Day", className: "holiday"},
          '28': {tooltip: "Boxing Day", className: "holiday"}
        }
      }
    };
    
    $('#datepicker').datepicker({beforeShowDay: function(date) {
      var d = date.getDate(),
        m = date.getMonth()+1,
        y = date.getFullYear();
        
      if (specialDays[y] && specialDays[y][m] && specialDays[y][m][d]) {
        var s = specialDays[y][m][d];
        return [true, s.className, s.tooltip]; // selectable
      }
      return [false,'']; // non-selectable
    }});
  });</script>

Open in new window


Then this is in the body:
<div id="datepicker"></div>

Open in new window


I hope this is enough information for an expert to help me with this questions.
TIA.
D2
JavaScriptWeb Frameworks

Avatar of undefined
Last Comment
dzash2000

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
hielo

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
dzash2000

ASKER
Thanks for that response. The link displayed as text.  I also realized that putting a link in this tooltip itself is useless since as soon as I roll off the date the tooltip disappears.  The link would have to be date square itself.
dzash2000

ASKER
The response did not help me do what I needed but it did get me to realize that I was asking the wrong question.
Valuable in its way.
Your help has saved me hundreds of hours of internet surfing.
fblack61