New to Kendo UI for Angular? Start a free 30-day trial

Displaying a Custom Tooltip for Scheduler Events


ProductProgress® Kendo UI® Scheduler for Angular


How can I display a custom Tooltip component when hovering over the Scheduler events?


To display a Kendo UI for Angular Tooltip when hovering over Scheduler events:

  1. Wrap the Scheduler component in a custom container with the kendoTooltip directive. To display the Tooltip on specific elements, set the showOn property to none and handle the HTML mouseover event.

        <kendo-scheduler ... >
            <kendo-scheduler-day-view> </kendo-scheduler-day-view>
  2. To dynamically show a tooltip for the necessary elements, use the built-in toggle and hide methods of the Tooltip inside the mouseover event handler.

    public showTooltip(e): void {
        const element = as HTMLElement;
        const tdHovered =
            element.nodeName === 'TD' &&
            element.firstElementChild.className === 'k-task';
        const titleHovered = element.className === 'k-task';
        if (tdHovered || titleHovered) {
            const anchorElement = titleHovered ? element.parentElement : element;
            this.tooltipDir.toggle(anchorElement, true);
        } else {
  3. Set the tooltipTemplate property to provide a custom template for the content of the Tooltip. Use the eventFromElement method of the Scheduler and find the event associated with the specified DOM element (if any).

    <ng-template #template let-anchor>
        <span>{{ scheduler.eventFromElement(anchor.nativeElement) | json }}</span>
    <div kendoTooltip tooltipTemplate]="template"> ... </div>
  4. When the view is changed, a new set of listeners are needed for the rendered events. More details about this step are available in the example below.

The following example demonstrates how to display a Tooltip for Scheduler events.

View Source
Change Theme:

In this article

Not finding the help you need?