To display tooltips for events, you should activate the Tooltip extension once on the page.

    tooltip: true

After that tooltips will be displayed with the default settings.

Related sample:  Tooltips

To configure tooltips, you have the following API:


  • hide() - hides the tooltip
  • show(event,text) - shows the tooltip at the browser event location with a specified content. The method takes two parameters:
    • event - browser event
    • text - tooltip content, will be added to innerHTML of the tooltip element
tooltip.hide();, text);

Configuration properties

  • className - the name of the CSS class that will be applied to tooltips
  • timeout_to_display - the delay in milliseconds, before tooltip is displayed for an event (by default, 50)
  • timeout_to_hide - the delay in milliseconds, before the tooltip hides (by default, 50)
  • delta_x - the right (if positive) offset of the cursor position (by default, 15)
  • delta_y - the top (if positive) offset of the cursor position (by default, -20)
scheduler.config.className = 'dhtmlXTooltip tooltip'; 
scheduler.config.timeout_to_display = 50;
scheduler.config.timeout_to_hide = 50;
scheduler.config.delta_x = 15; 
scheduler.config.delta_y = -20;


var format ="%Y-%m-%d %H:%i"); 
scheduler.templates.tooltip_text = function(start,end,event) {
    return "<b>Event:</b> "+event.text+"<br/><b>Start date:</b> "+
    format(start)+"<br/><b>End date:</b> "+format(end);
Back to top