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. Wrap the Grid component inside the kendoTooltip directive. Set showOn to none and handle the mouseover event to show the Tooltip in specific conditions.

        <div kendoTooltip
            filter=".k-grid td"
  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.

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

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

View Source
Change Theme:

In this article

Not finding the help you need?