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.

        <ng-template #template let-anchor>
            <span>{{ anchor.nativeElement.innerText }}</span>
        </ng-template>
  2. Set showOn to none and toggle the Tooltip programmatically.

        <div kendoTooltip
            showOn="none"
            [tooltipTemplate]="template"
            filter=".k-grid td"
            (mouseover)="showTooltip($event)">
        ...
        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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?