Rendering Tooltips for Gantt Timeline Pane Cells and Headers

Environment

Description

How can I show the content of a Kendo UI for Angular Gantt in a tooltip which will be displayed when the user hovers over the timeline pane cells and headers?

Solution

1. Use the Tooltip template to display the content of its anchor elements.

   Copy Code    <ng-template #template let-anchor>
           <span>{{ anchor.nativeElement.innerText }}</span>
           <span *ngIf="!anchor.nativeElement.innerText">{{ title }}</span>
       </ng-template>

2. Wrap the Gantt component inside the kendoTooltip directive. Set showOn to none and handle the mouseover event to show the Tooltip in specific conditions.

   Copy Code    <div
           kendoTooltip
           showOn="none"
           [tooltipTemplate]="template"
           filter="kendo-gantt td"
           (mouseover)="showTooltip($event)"
           (mouseleave)="onMouseLeave()"
       >
           <kendo-gantt>
           ...
           </kendo-gantt>
       </div>

3. Use the toggle and hide methods to change the visibility of the Tooltip programmatically.

   Copy Codepublic showTooltip(e: MouseEvent): void {
       const element = e.target as HTMLElement;
       if (element.nodeName === 'TH' || (element.nodeName === 'TD' && element.attributes.length > 0)) {
           this.tooltipDir.toggle(element);
       } else {
           this.tooltipDir.hide();
       }
   }
   public onMouseLeave(): void {
       this.tooltipDir.hide();
   }

The following example demonstrates the full implementation of the suggested approach.