Angular Data Grid: Tooltip Component

Tooltip components allow you to add your own tooltips to the grid's column headers and cells. Use these when the provided tooltip component or the default browser tooltip do not meet your requirements.

Below is a simple example of a tooltip component:

import {Component} from '@angular/core';
import {ITooltipParams} from "@ag-grid-community/core";
import {ITooltipAngularComp} from "@ag-grid-community/angular";

@Component({
   selector: 'tooltip-component',
   template: `
     <div class="custom-tooltip" [style.background-color]="color">
         <p><span>{{ data.athlete }}</span></p>
         <p><span>Country: </span>{{ data.country }}</p>
         <p><span>Total: </span>{{ data.total }}</p>
     </div>`,
   styles: [
       `
           :host {
               position: absolute;
               width: 150px;
               height: 70px;
               pointer-events: none;
               transition: opacity 1s;
           }

           :host.ag-tooltip-hiding {
               opacity: 0;
           }

           .custom-tooltip p {
               margin: 5px;
               white-space: nowrap;
           }

           .custom-tooltip p:first-of-type {
               font-weight: bold;
           }
       `
   ]
})
export class CustomTooltip implements ITooltipAngularComp {
   private params: {color: string} & ITooltipParams;
   private data: any[];
   private color: string;

   agInit(params: {color: string} & ITooltipParams): void {
       this.params = params;

       this.data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;
       this.color = this.params.color || 'white';
   }
}

The example below demonstrates how to provide custom tooltips to the grid. Notice the following:

The Custom Tooltip Component is supplied by name via colDef.tooltipComponent.
The Custom Tooltip Parameters (for tooltip background color) are supplied using colDef.tooltipComponentParams.
Tooltips are displayed instantly by setting tooltipShowDelay to 0.
Tooltips will be shown for the athlete and country columns

Implement this interface to create a tooltip component.

interface ITooltipAngularComp {
   /** The agInit(params) method is called on the tooltip component once.
       See below for details on the parameters. */
   agInit(params: ITooltipParams): void;
}

The agInit(params) method takes a params object with the items listed below:

interface ITooltipParams {
    location: string; // what part of the application is showing the tooltip, e.g. 'cell', 'header', 'menuItem' etc
    api: GridApi; // the grid API
    columnApi: ColumnApi; // the column API
    context: any; // the grid context

    value?: any; // the value to be rendered by the tooltip

    /* Column Params (N/A within some components like the Menu Item) */

    colDef?: ColDef | ColGroupDef; // the grid colDef
    column?: Column | ColumnGroup; // the column bound to this tooltip

    /* Row and Cell Params (N/A with headerTooltips) */

    valueFormatted?: any; // the formatted value to be rendered by the tooltip
    rowIndex?: number; // the index of the row containing the cell rendering the tooltip
    node?: RowNode; // the row node
    data?: any; // the row node data
}

See the registering custom components section for details on registering and using custom tooltip components.

If you don't want to use the grid's tooltip component, you can use the enableBrowserTooltips config to use the browser's default tooltip. The grid will simply set an element's title attribute to display the tooltip.

By default, when you hover on an item, it will take 2 seconds for the tooltip to be displayed. If you need to change this delay, the tooltipShowDelay config should be used, which is set in milliseconds.

The show delay will have no effect if you are using browser tooltips, as they are controlled entirely by the browser.

Showing Blank Values

The grid will not show a tooltip if there is no value to show. This is the default behaviour as the simplest form of tooltip will show the value it is provided without any additional information. In this case, it would be strange to show the tooltip with no value as that would show as a blank box.

This can be a problem if you wish a tooltip to display for blank values. For example, you might want to display a tooltip saying "This cell has no value" instead. To achieve this, you should utilise tooltipValueGetter to return something different when the value is blank.

The example below shows both displaying and not displaying the tooltip for blank values. Note the following:

The first three rows have athlete values of undefined, null and '' (empty string).
The column Athlete Col 1 uses tooltipField for the tooltip field. When there is no value (the first three rows) no tooltip is displayed.
The column Athlete Col 2 uses tooltipValueGetter for the tooltip field. The value getter will return a value (an object) regardless of whether the value to display is empty or not. This ensures the tooltip gets displayed even when no cell value is present.

Example: Blank Values

When we want to display a header tooltip, we set the headerTooltip config as a string, and that string will be displayed as the tooltip. However, when working with custom tooltips we set colDef.tooltipComponent to assign the column's tooltip component and the headerTooltip value will passed to the params object.

If headerTooltip is not present, the tooltip will not be rendered.

The example below shows how to set a custom tooltip to a header and to a grouped header. Note the following:

The column Athlete Col 1 does not have a tooltipComponent so it will render the value set in its headerTooltip config.
The column Athlete Col 2 uses tooltipComponent so the the value in headerTooltip is passed to the tooltipComponent params to be used.
The tooltipComponent detects that it's being rendered by a header because the params object does not contain a rowIndex value.

Example: Tooltips With Row Groups

The example below shows how to use the default tooltip component with group columns. Because the group column has no real field assigned to it, the tooltipValueGetter function must be used.

Mouse Tracking

The example below enables mouse tracking to demonstrate a scenario where tooltips need to follow the cursor. To enable this feature, set the tooltipMouseTrack to true in the gridOptions.

Example: Using Browser Tooltips

The example below demonstrates how to use the default browser tooltips.

Angular Data Grid: Tooltip Component

Simple Tooltip Component

Example: Custom Tooltip

Tooltip Component Interface

Registering Custom Tooltip Components

Default Browser Tooltip

Tooltip Show Delay

Showing Blank Values

Header Tooltip with Custom Tooltip

Example: Tooltips With Row Groups

Mouse Tracking

Example: Using Browser Tooltips