New to Kendo UI for Angular? Start a free 30-day trial

Rendering Tooltips for Grid Cells


ProductProgress® Kendo UI for Angular Tooltip


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?


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

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

        <div kendoTooltip
            filter=".k-grid td"
        public showTooltip(e: MouseEvent): void {
            const element = as HTMLElement;
            if ((element.nodeName === 'TD' || element.nodeName === 'TH')
                    && element.offsetWidth < element.scrollWidth) {
            } else {

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

View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?