Angular Data Grid Tooltips and Popovers

The Grid allows you to display a custom tooltip by using the built-in Kendo UI for Angular Tooltip and 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.

Change Theme

Theme

Loading ...

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 and its anchor 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 property to none and handle the mouseover event.

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

Change Theme

Theme

Loading ...

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 and its built-in 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 directive and the PopoverAnchorDirective directive. To get a reference of the data item for which the Popover will show, set the 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 event of the Popover.

   ts

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

Suggested Links

• API Reference of the Tooltip
• API Reference of the Popover
• API Reference of the GridComponent
• API Index of the Grid