Rendering Tooltips for Gantt Timeline Pane Cells and Headers

Environment

Product

Progress® Kendo UI for Angular Tooltip

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.

   ts

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

   ts

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

   ts

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

Change Theme

Theme

Loading ...