# Angular Data Grid Tooltips and Popovers

The [Angular Grid](https://www.telerik.com/kendo-angular-ui/components/grid) allows you to display a custom tooltip by using the built-in Kendo UI for Angular [`Tooltip`](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip) and [`Popover`](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover) components. The `Tooltip` is typically used for showing brief information, usually between 1-2 words and a sentence, while the `Popover` typically displays multi-line information.

Both components provide a convenient way to show additional information on click or hover for one or more cells in the Grid. You can customize the exact data that will render in the popup according to your requirements.

## Displaying a Tooltip

The following example demonstrates how to display a tooltip for the Grid's cells using the built-in [`Tooltip`](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip).

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

To display a `Tooltip` for the Grid's cells:

1. To display the contents of a hovered element in a tooltip, use the [Tooltip template](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/templates) and its [`anchor`](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/anchor-elements#anchor-elements) field.

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

2. Wrap the Grid component inside the `kendoTooltip` directive.

   ```html
       <div kendoTooltip ...>
           <kendo-grid></kendo-grid>
       </div>
   ```

3. To show the Tooltip in certain conditions, set the [`showOn`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/tooltipdirective#showon) property to `none` and handle the `mouseover` event.

4. To change the visibility of the Tooltip programmatically, 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.

   ```ts
   public showTooltip(e: MouseEvent): void {
       ...
       this.tooltipDir.toggle(element);
   }
   ```

## Displaying a Popover

The following example demonstrates how to display a popover for the Grid's cells using the built-in [`Popover`](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/tooltips/popover/source.txt)

To display a `Popover` for the Grid's cells:

1. To display additional information for a clicked element in a popover, use the [Popover component](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/popovercomponent) and its [built-in templates](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/templates).

   ```html
   <kendo-popover #popover ...>
       <ng-template kendoPopoverTitleTemplate let-anchor>
           ...
       </ng-template>
       <ng-template kendoPopoverBodyTemplate let-anchor let-data="data">
          ...
       </ng-template>
       ...
   </kendo-popover>
   ```

2. To set the anchor element for the `Popover`, use the built-in [`CellTemplateDirective `](https://www.telerik.com/kendo-angular-ui/components/grid/api/celltemplatedirective) directive and the [`PopoverAnchorDirective`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/popoveranchordirective) directive. To get a reference of the data item for which the `Popover` will show, set the [`showOn`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/popoveranchordirective#showon) attribute to `click` and handle the `click` event.

   ```html
   <ng-template kendoGridCellTemplate let-dataItem>
       <div kendoPopoverAnchor #anchor="kendoPopoverAnchor" showOn="click" >
           ...
       </div>
   </ng-template>
   ```

3. To hide the additional on-hover or on-click content, handle the [`hide`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/popovercomponent#hide) event of the `Popover`.

   ```ts
   public onHidePopover() {
       this.showDetails = false;
   }
   ```

## Suggested Links

* [API Reference of the `Tooltip`](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip)
* [API Reference of the `Popover`](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover)
* [API Reference of the `GridComponent`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui/components/grid/api)