ScheduleTooltip
Feature that displays a tooltip containing the time at the mouse position when hovering empty parts of the schedule.
//<code-header>
fiddle.title = 'Schedule tooltip';
//</code-header>
targetElement.innerHTML = '<p>Hover an empty part of the schedule to display the ScheduleTooltip:</p>';
const scheduler = new Scheduler({
appendTo : targetElement,
features : {
scheduleTooltip : {
getText(date, event, resource) {
return 'Hovering ' + resource.name;
}
}
},
// makes scheduler as high as it needs to be to fit rows
autoHeight : true,
startDate : new Date(2018, 4, 6),
endDate : new Date(2018, 4, 13),
columns : [
{ field : 'name', text : 'Name', width : 100 }
],
resources : [
{ id : 1, name : 'Bernard' },
{ id : 2, name : 'Bianca' }
],
events : [
{ id : 1, resourceId : 1, name : 'Hover outside me', startDate : '2018-05-07', endDate : '2018-05-10', iconCls : 'fa fa-mouse-pointer' }
]
});To hide the schedule tooltip, just disable this feature:
const scheduler = new Scheduler({
features : {
scheduleTooltip : false
}
});
You can also output a message along with the default time indicator (to indicate resource availability etc)
const scheduler = new Scheduler({
features : {
scheduleTooltip : {
getText(date, event, resource) {
return 'Hovering ' + resource.name;
}
}
}
});
To take full control over the markup shown in the tooltip you can override the generateTipContent method:
const scheduler = new Scheduler({
features : {
scheduleTooltip : {
generateTipContent({ date, event, resourceRecord }) {
return `
<dl>
<dt>Date</dt><dd>${date}</dd>
<dt>Resource</dt><dd>${resourceRecord.name}</dd>
</dl>
`;
}
}
}
});
Configuration properties from the feature are passed down into the resulting Tooltip instance.
const scheduler = new Scheduler({
features : {
scheduleTooltip : {
// Don't show the tip until the mouse has been over the schedule for three seconds
hoverDelay : 3000
}
}
});
This feature is enabled by default in Scheduler and disabled in ResourceUtilization.
For info on enabling it, see GridFeatures.
Configs
10
Configs
10Other
Set to true to hide this tooltip when hovering non-working time. Defaults to false for Scheduler,
true for SchedulerPro
Misc
Properties
15
Properties
15Common
Class hierarchy
Other
Functions
30
Functions
30Other
Called as mouse pointer is moved over a new resource or time block. You can override this to show custom HTML in the tooltip.
| Parameter | Type | Description |
|---|---|---|
context | Object | |
context.date | Date | The date of the hovered point |
context.event | Event | The DOM event that triggered this tooltip to show |
context.resourceRecord | ResourceModel | The resource record |
The HTML contents to show in the tooltip (an empty return value will hide the tooltip)
Override this to render custom text to default hover tip
| Parameter | Type | Description |
|---|---|---|
date | Date | |
event | Event | Browser event |
resourceRecord | ResourceModel | The resource record |