{"id":2542,"date":"2014-11-11T20:03:06","date_gmt":"2014-11-11T16:03:06","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2542"},"modified":"2023-05-05T13:56:26","modified_gmt":"2023-05-05T10:56:26","slug":"tooltips-with-popup-in-dhtmlxcalendar","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/tooltips-with-popup-in-dhtmlxcalendar\/","title":{"rendered":"DHTMLX Little-Known Features: Tooltips with Popup in dhtmlxCalendar"},"content":{"rendered":"

A week has passed since our previous<\/a> tip and again we’re ready to share a cool and useful feature. <\/p>\n

We want to show you how fast and simple you can put tooltips with a popup window into our JavaScript Date Picker<\/a>, dhtmlxCalendar. <\/p>\n

Just two steps!<\/p>\n

Step 1.<\/strong><\/p>\n

First of all, we need to initialize dhtmlxCalendar on the page:
\n<\/p>\n

var<\/span> myCalendar =<\/span> new<\/span> dhtmlXCalendarObject(<\/span>"objId"<\/span>)<\/span>;<\/span>
\nmyCalendar.hideTime<\/span>(<\/span>)<\/span>;<\/span>
\nmyCalendar.show<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

\nStep 2.<\/strong><\/p>\n

myCalendar.setTooltip<\/span>(<\/span>"2014-11-11,2014-11-12,2014-11-13,2014-11-14"<\/span>,<\/span> "Going skiing to Vancouver"<\/span>,<\/span> true<\/span>,<\/span> true<\/span>)<\/span>;<\/span>
\nmyCalendar.setTooltip<\/span>(<\/span>"2014-11-27"<\/span>,<\/span> "Thanksgiving Day"<\/span>,<\/span> true<\/span>,<\/span> true<\/span>)<\/span>;<\/span>
\nmyCalendar.setTooltip<\/span>(<\/span>"2014-11-30"<\/span>,<\/span> "The end of Movember :)"<\/span>,<\/span> true<\/span>,<\/span> true<\/span>)<\/span>;<\/span><\/div><\/div>\n

As a result:
\n
\n\"Tooltips-with-popups\"
\n
\nThat’s all. Just several lines of code and this nice-looking feature is ready.<\/p>\n","protected":false},"excerpt":{"rendered":"

A week has passed since our previous tip and again we’re ready to share a cool and useful feature. We want to show you how fast and simple you …<\/p>\n","protected":false},"author":2,"featured_media":3315,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,43,14],"class_list":["post-2542","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-dhtmlx-tips","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2542"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2542\/revisions"}],"predecessor-version":[{"id":11409,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2542\/revisions\/11409"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3315"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Then we set tooltips<\/a> on the dates which we’d like to mark, and specify the needed text:
\n<\/p>\n