Render Tooltips for Grid Cells

You can show the content of a Grid cell in a tooltip which will be displayed when the user hovers over that cell.

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

2. Set showOn to none and toggle the Tooltip programmatically.

   Copy Code    <div kendoTooltip
           showOn="none"
           [tooltipTemplate]="template"
           filter=".k-grid td"
           (mouseover)="showTooltip($event)">
       ...

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

The following example demonstrates the full implementation of the approach. Hover over a cell whose text content doesn't fit in it, and the tooltip will appear.

Suggested Links

• API Reference of the Tooltip Component