Tooltips

Here you can find all necessary information to use tooltips in your application.
Firstly, add the following files:

<script src='../../codebase/ext/dhtmlxscheduler_tooltip.js' type="text/javascript" charset="utf-8"></script>

Configuration and customization options

  • Css class name of the tooltip. So you can create tooltips with different classnames depending on the event.
dhtmlXTooltip.config.className = 'dhtmlXTooltip tooltip';
  • Timeout in ms before tooltip will be displayed
dhtmlXTooltip.config.timeout_to_display = 50;
  • Right margin (if positive) to the cursor's position
dhtmlXTooltip.config.delta_x = 10;
  • top margin (if positive) to the cursor's position
dhtmlXTooltip.config.delta_x = 60;
  • Template for the text that will be represent in the tooltip
scheduler.templates.tooltip_text = function(start,end,event) {
return "<b>Event:</b> "+event.text+"<br/><b>Start date:</b> "+scheduler.templates.tooltip_date_format(start)+"<br/><b>End date:</b> "+scheduler.templates.tooltip_date_format(end);
}
  • Template for the date format of the tooltip text
scheduler.templates.tooltip_date_format=scheduler.date.date_to_str("%Y-%m-%d %H:%i");