# Rendering Tooltips for Grid Cells

## Environment

<table>
    <tbody>
	    <tr>
	    	<td>Product</td>
	    	<td>Progress® Kendo UI for Angular Tooltip</td>
	    </tr>
    </tbody>
</table>

## 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

> The Grid component provides built-in tooltip support. For more information, see [Grid Tooltips](https://www.telerik.com/kendo-angular-ui/components/grid/accessories/tooltips).

This article demonstrates a custom implementation using the Tooltip directive for specific use cases that require custom behavior.

1. Use the [Tooltip template](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/templates) to display the content of its [`anchor`](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/anchor-elements#anchor-elements) 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`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/tooltipdirective#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`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/tooltipdirective#toggle) and [`hide`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/tooltipdirective#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/knowledge-base/tooltip-over-grid/source.txt)

## Suggested Links

* [Rendering Tooltips for Spreadsheet Cells](https://www.telerik.com/kendo-angular-ui/components/knowledge-base/spreadsheet-display-tooltips)
* [Tooltip Overview](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip)
* [Grid Overview](https://www.telerik.com/kendo-angular-ui/components/grid)
* [API Reference of the TooltipDirective](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/tooltipdirective)