Rendering Tooltips for Grid Cells

Environment

Product

Progress® Kendo UI for Angular Tooltip

Description

How can I show the content of a Kendo UI for Angular Grid cell in a tooltip which will be displayed when the user hovers over that cell?

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>
       </ng-template>

2. Wrap the Grid 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=".k-grid td"
           (mouseover)="showTooltip($event)"
       >
           <kendo-grid>
           ...
           </kendo-grid>
       </div>

3. Use the toggle and hide methods to change the visibility of the Tooltip programmatically. In this case, a tooltip will appear on cells whose text content doesn't fit.

   ts

       public showTooltip(e: MouseEvent): void {
           const element = e.target as HTMLElement;
           if ((element.nodeName === 'TD' || element.className === 'k-column-title')
                   && element.offsetWidth < element.scrollWidth) {
               this.tooltipDir.toggle(element);
           } else {
               this.tooltipDir.hide();
           }
       }

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

Change Theme

Theme

Loading ...