Angular Data GridTooltips

Version 36.2.0

Tooltips can be set for cells and column headers.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [tooltipShowDelay]="tooltipShowDelay"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: (ColDef | ColGroupDef)[] = [
    {
      headerName: "Athlete",
      field: "athlete",
      // here the Athlete column will tooltip the Country value
      tooltip: ({ data }) => data?.country,
      headerTooltip: "Tooltip for Athlete Column Header",
    },
    {
      field: "age",
      tooltip: "Create any fixed message, e.g. This is the Athlete’s Age ",
      headerTooltip: "Tooltip for Age Column Header",
    },
    {
      field: "year",
      tooltip: (p) => "This is a dynamic tooltip using the value of " + p.value,
      headerTooltip: "Tooltip for Year Column Header",
    },
    {
      headerName: "Hover For Tooltip",
      headerTooltip: "Column Groups can have Tooltips also",
      children: [
        {
          field: "sport",
          tooltip: "Tooltip text about Sport should go here",
          headerTooltip: "Tooltip for Sport Column Header",
        },
      ],
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  tooltipShowDelay = 500;
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

The following Column Definition properties configure tooltips:

TooltipDefinition

Tooltip for the cell.

true shows the displayed cell value (valueFormatted when present, otherwise value).

false disables tooltip content configured on the Column Definition.

A string shows static content.

A callback resolves the content from the supplied params.

When the column is grouped, group rows in the generated group column inherit this value.

TooltipModule

Use tooltip: true for the common case where the tooltip should match the displayed cell value. This uses valueFormatted when present, otherwise value, regardless of whether the value came from field or valueGetter.

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    { field: 'price', valueFormatter: priceFormatter, tooltip: true },
    { field: 'status', tooltip: 'Current status' },
    { field: 'athlete', tooltip: (params) => `Country: ${params.data?.country}` },
    { field: 'internalId', tooltip: false },
];

tooltip: false disables cell tooltip content supplied by tooltip, tooltipField, or tooltipValueGetter. Tooltips supplied at runtime by a Cell Renderer using setTooltip, and grid-owned validation or formula error tooltips, remain available. These independent tooltip sources continue to use the column's tooltipComponent and tooltipComponentParams when configured.

The same value forms are accepted by headerTooltip. With headerTooltip: true, the displayed header name is used. Setting headerTooltip: false does not disable a tooltip supplied at runtime by a custom Header Component using setTooltip.

Cell and header tooltip callbacks receive the same parameters. value is the underlying cell value or displayed header name, and valueFormatted contains the formatted value when available.

Properties available on the TooltipCallbackParams<TData = any, TValue = any, TContext = any> interface.

TooltipLocation

What part of the application is showing the tooltip, e.g. 'cell', 'header', or 'menu'.

TValue | null

The source value. For cell tooltips, this is the cell value before tooltip content is resolved.

string | null

The formatted source value, when available.

ColDef | ColGroupDef | null

Column / ColumnGroup definition.

Column | ColumnGroup | ProvidedColumnGroup

Column / ColumnGroup

number

The index of the row containing the cell rendering the tooltip.

IRowNode

The row node.

TData

Data for the row node in question.

GridApi

The grid api.

TContext

Application context as set on gridOptions.context.

Tooltips for Truncated Text Copy Link

It's possible to configure tooltips to show only when the items hovered are truncated by setting tooltipShowMode = 'whenTruncated'.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [tooltipShowDelay]="tooltipShowDelay"
    [tooltipShowMode]="tooltipShowMode"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      field: "athlete",
      tooltip: true,
      width: 130,
    },
    {
      field: "country",
      tooltip: true,
      headerName: "Country of Athlete",
      headerTooltip: "Country of Athlete",
      width: 100,
    },
    {
      field: "sport",
      tooltip: true,
    },
  ];
  tooltipShowDelay = 500;
  tooltipShowMode: "standard" | "whenTruncated" = "whenTruncated";
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

tooltipShowMode = 'whenTruncated' has no effect when using Browser Tooltips, as Browser Tooltips are controlled by the browser and not the grid.

Show and Hide Delay Copy Link

By default, tooltips show after 2 seconds and hide after 10 seconds. These delays can be configured in milliseconds:

number

default: 2000

The delay in milliseconds that it takes for tooltips to show up once an element is hovered over. Note: This property does not work if enableBrowserTooltips is true.

TooltipModule

number

default: 200

The delay in milliseconds before a tooltip is shown when moving the pointer from one tooltip-enabled element to another while the previous tooltip is still visible or pending hide. Note: This property does not work if enableBrowserTooltips is true.

TooltipModule

number

default: 10000

The delay in milliseconds that it takes for tooltips to hide once they have been displayed. Note: This property does not work if enableBrowserTooltips is true and tooltipHideTriggers includes timeout.

TooltipModule

<ag-grid-angular
    [tooltipShowDelay]="tooltipShowDelay"
    [tooltipSwitchShowDelay]="tooltipSwitchShowDelay"
    [tooltipHideDelay]="tooltipHideDelay"
    /* other grid options ... */ />

this.tooltipShowDelay = 0;
this.tooltipSwitchShowDelay = 1000;
this.tooltipHideDelay = 2000;

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [tooltipShowDelay]="tooltipShowDelay"
    [tooltipSwitchShowDelay]="tooltipSwitchShowDelay"
    [tooltipHideDelay]="tooltipHideDelay"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      headerName: "Athlete",
      field: "athlete",
      tooltipComponentParams: { color: "#55AA77" },
      tooltip: ({ data }) => data?.country,
      headerTooltip: "Tooltip for Athlete Column Header",
    },
    {
      field: "age",
      tooltip: "Create any fixed message, e.g. This is the Athlete’s Age ",
      headerTooltip: "Tooltip for Age Column Header",
    },
    {
      field: "year",
      tooltip: (p) => "This is a dynamic tooltip using the value of " + p.value,
      headerTooltip: "Tooltip for Year Column Header",
    },
    {
      field: "sport",
      tooltip: "Tooltip text about Sport should go here",
      headerTooltip: "Tooltip for Sport Column Header",
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  tooltipShowDelay = 0;
  tooltipSwitchShowDelay = 1000;
  tooltipHideDelay = 2000;
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Setting delays will have no effect if using Browser Tooltips as Browser Tooltips are controlled by the browser and not the grid.

Blank Values Copy Link

Tooltips are not shown for the missing values undefined, null and "" (empty string). To display a tooltip for a missing value, use a callback that returns non-empty content.

In the example below:

The data has missing values undefined, null and '' (empty String) as the first three rows.
Column A uses tooltip: true, so no tooltip is shown for a missing displayed value.
Column B uses a tooltip callback to return fallback content, so a tooltip is shown.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TooltipCallbackParams,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [tooltipShowDelay]="tooltipShowDelay"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      headerName: "A - Missing Value, NO Tooltip",
      field: "athlete",
      tooltip: true,
    },
    {
      headerName: "B - Missing Value, WITH Tooltip",
      field: "athlete",
      tooltip: getTooltip,
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  tooltipShowDelay = 500;
  rowData!: any[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent) {
    this.http
      .get<any[]>("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        // set some blank values to test tooltip against
        data[0].athlete = undefined;
        data[1].athlete = null;
        data[2].athlete = "";
        this.rowData = data;
      });
  }
}

const getTooltip = (params: TooltipCallbackParams) =>
  params.value == null || params.value === "" ? "- Missing -" : params.value;

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

Row Groups Copy Link

When a column is grouped, the generated group column inherits tooltip, tooltipComponent, and tooltipComponentParams from the underlying column's Column Definition. This is consistent with how valueFormatter is inherited. With groupDisplayType: 'multipleColumns', the group column header also inherits headerTooltip.

Cell tooltip properties set on autoGroupColumnDef (tooltip and tooltipComponent) apply to leaf rows only. headerTooltip still applies to the group column header.

In the example below:

The Country and Year columns each define a tooltip callback. Hover a group key to see the tooltip inherited from the underlying column.
autoGroupColumnDef defines a tooltip callback. Hover a leaf row in the group column to see it.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
  SetFilterModule,
} from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TooltipModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  SetFilterModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [autoGroupColumnDef]="autoGroupColumnDef"
    [defaultColDef]="defaultColDef"
    [tooltipShowDelay]="tooltipShowDelay"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      field: "country",
      width: 120,
      rowGroup: true,
      hide: true,
      // inherited by group rows in the group column
      tooltip: (params) => `Country: ${params.value}`,
    },
    {
      field: "year",
      width: 90,
      rowGroup: true,
      hide: true,
      // inherited by group rows in the group column
      tooltip: (params) => `Year: ${params.value}`,
    },
    { field: "athlete", width: 200 },
    { field: "age", width: 90 },
    { field: "sport", width: 110 },
  ];
  autoGroupColumnDef: AutoGroupColumnDef = {
    headerTooltip: "Group",
    minWidth: 190,
    // applies to leaf rows only; group rows inherit from their colDef
    tooltip: (params) => `Athlete: ${params.value}`,
  };
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  tooltipShowDelay = 500;
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

autoGroupColumnDef cell tooltip properties apply to leaf rows only. Group rows inherit their cell tooltips from the underlying column colDef.

Grouped Column Headers Copy Link

With groupDisplayType: 'multipleColumns', each generated group column header inherits the headerTooltip from its underlying column colDef. Hover a group column header in the example below to see the inherited tooltip.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowGroupingDisplayType,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TooltipModule,
  ClientSideRowModelModule,
  RowGroupingModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [tooltipShowDelay]="tooltipShowDelay"
    [groupDisplayType]="groupDisplayType"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      field: "country",
      rowGroup: true,
      hide: true,
      // inherited by the generated group column header
      headerTooltip: "Group by Country",
    },
    {
      field: "year",
      rowGroup: true,
      hide: true,
      // inherited by the generated group column header
      headerTooltip: "Group by Year",
    },
    { field: "athlete" },
    { field: "sport" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  tooltipShowDelay = 500;
  groupDisplayType: RowGroupingDisplayType = "multipleColumns";
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Full Width Group Rows Copy Link

With groupDisplayType: 'groupRows', full-width group rows inherit their tooltips from the underlying column colDef. Hover a group row in the example below to see the tooltip defined on the grouped column.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowGroupingDisplayType,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TooltipModule,
  ClientSideRowModelModule,
  RowGroupingModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [tooltipShowDelay]="tooltipShowDelay"
    [groupDisplayType]="groupDisplayType"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      field: "country",
      rowGroup: true,
      hide: true,
      // shown on the full-width group row inherited from this colDef
      tooltip: (params) => `Country: ${params.value}`,
    },
    {
      field: "year",
      rowGroup: true,
      hide: true,
      // shown on the full-width group row inherited from this colDef
      tooltip: (params) => `Year: ${params.value}`,
    },
    { field: "athlete" },
    { field: "sport" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  tooltipShowDelay = 500;
  groupDisplayType: RowGroupingDisplayType = "groupRows";
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Aggregated Cells Copy Link

When a group row displays an aggregated value in a data column, hovering that cell shows a tooltip for the aggregated value, not the underlying row data.

Touch Devices Copy Link

On iOS and Android, press and hold a tooltip-enabled grid element to show its rich HTML tooltip. The tooltip opens as soon as the long press is recognised, without applying tooltipShowDelay a second time. Moving the touch before the long press completes cancels the gesture. Tap elsewhere to dismiss the tooltip. Grid gestures that already use the long press, such as the context menu and column menu, take precedence over the tooltip. Setting suppressTouch=true disables this gesture. Browser Tooltips remain controlled by the browser.

Mouse Tracking Copy Link

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.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [tooltipShowDelay]="tooltipShowDelay"
    [tooltipMouseTrack]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      headerName: "Athlete",
      field: "athlete",
      tooltipComponentParams: { color: "#55AA77" },
      tooltip: ({ data }) => data?.country,
      headerTooltip: "Tooltip for Athlete Column Header",
    },
    {
      field: "age",
      tooltip: "Create any fixed message, e.g. This is the Athlete’s Age ",
      headerTooltip: "Tooltip for Age Column Header",
    },
    {
      field: "year",
      tooltip: (p) => "This is a dynamic tooltip using the value of " + p.value,
      headerTooltip: "Tooltip for Year Column Header",
    },
    {
      field: "sport",
      tooltip: "Tooltip text about Sport should go here",
      headerTooltip: "Tooltip for Sport Column Header",
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  tooltipShowDelay = 500;
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Set the grid property enableBrowserTooltips=true to stop using rich HTML Components and use the browsers native tooltip.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [enableBrowserTooltips]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      headerName: "Athlete",
      field: "athlete",
      tooltipComponentParams: { color: "#55AA77" },
      tooltip: ({ data }) => data?.country,
      headerTooltip: "Tooltip for Athlete Column Header",
    },
    {
      field: "age",
      tooltip: "Create any fixed message, e.g. This is the Athlete’s Age ",
      headerTooltip: "Tooltip for Age Column Header",
    },
    {
      field: "year",
      tooltip: (p) => "This is a dynamic tooltip using the value of " + p.value,
      headerTooltip: "Tooltip for Year Column Header",
    },
    {
      field: "sport",
      tooltip: "Tooltip text about Sport should go here",
      headerTooltip: "Tooltip for Sport Column Header",
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Interactive Tooltips Copy Link

By default, tooltips cannot be interacted with and hovering them has no effect. If tooltipInteraction=true is set in the grid options, tooltips remain visible while being hovered and their content can be selected or activated.

<ag-grid-angular
    [tooltipInteraction]="tooltipInteraction"
    /* other grid options ... */ />

this.tooltipInteraction = true;

The example below enables Tooltip Interaction to demonstrate a scenario where tooltips will not disappear while hovered. Note following:

Tooltips will not disappear while being hovered.
Tooltips content can be selected and copied.
Tab moves focus into focusable tooltip content and Escape closes the tooltip.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [tooltipShowDelay]="tooltipShowDelay"
    [tooltipInteraction]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      headerName: "Athlete",
      field: "athlete",
      tooltipComponentParams: { color: "#55AA77" },
      tooltip: ({ data }) => data?.country,
      headerTooltip: "Tooltip for Athlete Column Header",
    },
    {
      field: "age",
      tooltip: "Create any fixed message, e.g. This is the Athlete’s Age ",
      headerTooltip: "Tooltip for Age Column Header",
    },
    {
      field: "year",
      tooltip: (p) => "This is a dynamic tooltip using the value of " + p.value,
      headerTooltip: "Tooltip for Year Column Header",
    },
    {
      field: "sport",
      tooltip: "Tooltip text about Sport should go here",
      headerTooltip: "Tooltip for Sport Column Header",
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  tooltipShowDelay = 500;
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

The example below shows Tooltip Interaction with Custom Tooltips. Note the following:

Tooltip is enabled for the Athlete and Age columns.
Tooltips will not disappear while being hovered.
The custom tooltip displays a text input and a Submit button which when clicked, updates the value of the Athlete Column cell in the hovered row and then closes itself by calling hideTooltipCallback().

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowApiModule,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TooltipModule,
  ClientSideRowModelModule,
  RowApiModule,
]);
import { CustomTooltip } from "./custom-tooltip.component";
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular, CustomTooltip],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [tooltipInteraction]="true"
    [tooltipShowDelay]="tooltipShowDelay"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      field: "athlete",
      minWidth: 150,
      tooltip: true,
      tooltipComponentParams: { type: "success" },
    },
    { field: "age", minWidth: 130, tooltip: true },
    { field: "year" },
    { field: "sport" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
    tooltipComponent: CustomTooltip,
  };
  tooltipShowDelay = 500;
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

styles.css

.custom-tooltip {
    color: var(--ag-foreground-color);
    background-color: #5577cc;
    padding: 5px;
}

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

.custom-tooltip p:first-of-type {
    font-weight: bold;
}

custom-tooltip.component.ts

import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import type { ITooltipAngularComp } from 'ag-grid-angular';
import type { ITooltipParams } from 'ag-grid-community';

@Component({
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgClass],
    template: ` <div class="custom-tooltip">
        <div [ngClass]="'panel panel-' + type()">
            <div class="panel-heading">
                <h3 class="panel-title">{{ data()?.country }}</h3>
            </div>
            <form class="panel-body" (submit)="onFormSubmit($event)">
                <div class="form-group">
                    <input
                        type="text"
                        class="form-control"
                        id="name"
                        placeholder="Name"
                        autocomplete="off"
                        value="{{ data()?.athlete }}"
                        (focus)="$event.target.select()"
                    />
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                <p>Total: {{ data()?.total }}</p>
            </form>
        </div>
    </div>`,
    styles: [
        `
            .custom-tooltip p {
                margin: 5px;
                white-space: nowrap;
            }

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

    data = signal<any>(undefined);
    type = signal<string>('primary');

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

        this.data.set(params.api!.getDisplayedRowAtIndex(params.rowIndex!)!.data);
        this.type.set(this.params.type || 'primary');
    }

    onFormSubmit(e: Event) {
        e.preventDefault();

        const { node } = this.params;

        const input = (e.target as HTMLElement).querySelector('input') as HTMLInputElement;

        if (input.value) {
            node?.setDataValue('athlete' as any, input.value);

            this.params.hideTooltipCallback?.();
        }
    }
}

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Custom Component Copy Link

The grid does not use the browser's default tooltip, instead it has a rich HTML Tooltip Component. The default Tooltip Component can be replaced with a Custom Tooltip Component using colDef.tooltipComponent.

In the example below:

tooltipComponent is set on the Default Column Definition so it applies to all Columns.
tooltipComponentParams is set on the Athlete Column Definition to provide a Custom Property, in this instance setting the background color.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);
import { CustomTooltip } from "./custom-tooltip.component";
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular, CustomTooltip],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [tooltipShowDelay]="tooltipShowDelay"
    [tooltipHideDelay]="tooltipHideDelay"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      headerName: "Athlete",
      field: "athlete",
      tooltipComponentParams: { color: "#55AA77" },
      tooltip: ({ data }) => data?.country,
      headerTooltip: "Tooltip for Athlete Column Header",
    },
    {
      field: "age",
      tooltip: "Create any fixed message, e.g. This is the Athlete’s Age ",
      headerTooltip: "Tooltip for Age Column Header",
    },
    {
      field: "year",
      tooltip: (p) => "This is a dynamic tooltip using the value of " + p.value,
      headerTooltip: "Tooltip for Year Column Header",
    },
    {
      field: "sport",
      tooltip: "Tooltip text about Sport should go here",
      headerTooltip: "Tooltip for Sport Column Header",
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
    tooltipComponent: CustomTooltip,
  };
  tooltipShowDelay = 0;
  tooltipHideDelay = 2000;
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

styles.css

.custom-tooltip {
    padding: 5px;
    color: var(--ag-foreground-color);
    background-color: #5577cc;
}

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

.custom-tooltip p:first-of-type {
    font-weight: bold;
}

custom-tooltip.component.ts

import { Component } from '@angular/core';

import type { ITooltipAngularComp } from 'ag-grid-angular';
import type { ITooltipParams } from 'ag-grid-community';

@Component({
    standalone: true,
    template: ` <div class="custom-tooltip" [style.background-color]="color">
        <div><b>Custom Tooltip</b></div>
        <div>{{ params.value }}</div>
    </div>`,
    styles: [
        `
            :host {
                position: absolute;
                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 {
    params!: { color: string } & ITooltipParams;
    color!: string;

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

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

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:

Properties available on the ITooltipParams<TData = any, TValue = any, TContext = any> interface.

TValue | null

The resolved value to render in the tooltip.

Function

A callback function that hides the tooltip.

TooltipLocation

What part of the application is showing the tooltip, e.g. 'cell', 'header', or 'menu'.

string | null

The formatted source value, when available.

ColDef | ColGroupDef | null

Column / ColumnGroup definition.

Column | ColumnGroup | ProvidedColumnGroup

Column / ColumnGroup

number

The index of the row containing the cell rendering the tooltip.

IRowNode

The row node.

TData

Data for the row node in question.

GridApi

The grid api.

TContext

Application context as set on gridOptions.context.

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

Angular Data GridTooltips

Tooltip Callback Copy Link

Tooltips for Truncated Text Copy Link

Show and Hide Delay Copy Link

Blank Values Copy Link

Row Groups Copy Link

Grouped Column Headers Copy Link

Full Width Group Rows Copy Link

Aggregated Cells Copy Link

Touch Devices Copy Link

Mouse Tracking Copy Link

Browser Tooltip Copy Link

Interactive Tooltips Copy Link

Custom Component Copy Link