# Rendering Tooltips for Spreadsheet Cells

## Environment

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

## Description

How can I show the content of a Kendo UI for Angular Spreadsheet cell in a tooltip which will be displayed when the user hovers over that cell?

## Solution

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.

   ```html
   <ng-template #template let-anchor>
       <span>{{ anchor.nativeElement.innerText }}</span>
   </ng-template>
   ```

2. Wrap the Spreadsheet 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.

   ```html
   <div
     kendoTooltip
     showOn="none"
     [tooltipTemplate]="template"
     filter="div .k-spreadsheet-cell.k-vertical-align-bottom"
     (mouseover)="showTooltip($event)"
   >
     <kendo-spreadsheet></kendo-spreadsheet>
   </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. Show a tooltip when hovering over Spreadsheet cells.

   ```ts
   public showTooltip(e: MouseEvent): void {
       const element = e.target as HTMLElement;
       if (
           element.nodeName === 'DIV' &&
           (element.classList.contains('k-spreadsheet-cell') ||
           element.classList.contains('k-vertical-align-bottom'))
       ) {
           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/spreadsheet-cell-tooltips/source.txt)

## Suggested Links

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