Displaying a Custom Tooltip for Scheduler Events

Environment

Description

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

Solution

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.

   Copy Code<div
       kendoTooltip
       showOn="none"
       (mouseover)="showTooltip($event)">
       <kendo-scheduler ... >
           <kendo-scheduler-day-view> </kendo-scheduler-day-view>
           ...
       </kendo-scheduler>
   </div>

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.

   Copy Codepublic showTooltip(e): void {
       const element = e.target 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 {
           this.tooltipDir.hide();
       }
   }

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).

   Copy Code<ng-template #template let-anchor>
       <span>{{ scheduler.eventFromElement(anchor.nativeElement) | json }}</span>
   </ng-template>
   
   <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.