JavaScript Data GridTooltips

Version 36.1.0

Tooltips can be set for Cells and Column Headers.

main.ts

import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const columnDefs: (ColDef | ColGroupDef)[] = [
  {
    headerName: "Athlete",
    field: "athlete",
    // here the Athlete column will tooltip the Country value
    tooltipField: "country",
    headerTooltip: "Tooltip for Athlete Column Header",
  },
  {
    field: "age",
    tooltipValueGetter: (p: ITooltipParams) =>
      "Create any fixed message, e.g. This is the Athlete’s Age ",
    headerTooltip: "Tooltip for Age Column Header",
  },
  {
    field: "year",
    tooltipValueGetter: (p: ITooltipParams) =>
      "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",
        tooltipValueGetter: () => "Tooltip text about Sport should go here",
        headerTooltip: "Tooltip for Sport Column Header",
      },
    ],
  },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  columnDefs: columnDefs,
  tooltipShowDelay: 500,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });

index.html

<div id="myGrid" style="height: 100%"></div>

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 set Tooltips:

ColDefField

The field of the tooltip to apply to the cell. When the column is grouped, group rows in the generated group column inherit this value.

TooltipModule

TooltipValueGetterFunc

Callback that should return the string to use for a tooltip, tooltipField takes precedence if set. If using a custom tooltipComponent you may return any custom value to be passed to your tooltip component. When the column is grouped, group rows in the generated group column inherit this callback.

TooltipModule

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'.

main.ts

import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  TooltipModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const columnDefs: (ColDef | ColGroupDef)[] = [
  {
    field: "athlete",
    tooltipField: "athlete",
    width: 130,
  },
  {
    field: "country",
    tooltipField: "country",
    headerName: "Country of Athlete",
    headerTooltip: "Country of Athlete",
    width: 100,
  },
  {
    field: "sport",
    tooltipField: "sport",
  },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs,
  tooltipShowDelay: 500,
  tooltipShowMode: "whenTruncated",
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });

index.html

<div id="myGrid" style="height: 100%"></div>

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

const gridOptions = {
    tooltipShowDelay: 0,
    tooltipSwitchShowDelay: 1000,
    tooltipHideDelay: 2000,

    // other grid options ...
}

main.ts

import {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const columnDefs: ColDef[] = [
  {
    headerName: "Athlete",
    field: "athlete",
    tooltipComponentParams: { color: "#55AA77" },
    tooltipField: "country",
    headerTooltip: "Tooltip for Athlete Column Header",
  },
  {
    field: "age",
    tooltipValueGetter: (p: ITooltipParams) =>
      "Create any fixed message, e.g. This is the Athlete’s Age ",
    headerTooltip: "Tooltip for Age Column Header",
  },
  {
    field: "year",
    tooltipValueGetter: (p: ITooltipParams) =>
      "This is a dynamic tooltip using the value of " + p.value,
    headerTooltip: "Tooltip for Year Column Header",
  },
  {
    field: "sport",
    tooltipValueGetter: () => "Tooltip text about Sport should go here",
    headerTooltip: "Tooltip for Sport Column Header",
  },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  tooltipShowDelay: 0,
  tooltipSwitchShowDelay: 1000,
  tooltipHideDelay: 2000,
  columnDefs: columnDefs,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });

index.html

<div id="myGrid" style="height: 100%"></div>

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 tooltips for missing values, provide a tooltipValueGetter to return something that is not empty.

In the example below:

The data has missing values undefined, null and '' (empty String) as the first three rows.
Column A uses tooltipField, no tooltip is shown.
Column B uses tooltipValueGetter to return an object, tooltip is shown.

main.ts

import {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";

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

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

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

const columnDefs: ColDef[] = [
  {
    headerName: "A - Missing Value, NO Tooltip",
    field: "athlete",
    tooltipField: "athlete",
  },
  {
    headerName: "B - Missing Value, WITH Tooltip",
    field: "athlete",
    tooltipValueGetter: toolTipValueGetter,
  },
];

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  tooltipShowDelay: 500,
  columnDefs: columnDefs,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    // set some blank values to test tooltip against
    data[0].athlete = undefined;
    data[1].athlete = null;
    data[2].athlete = "";
    gridApi!.setGridOption("rowData", data);
  });

index.html

<div id="myGrid" style="height: 100%"></div>

Row Groups Copy Link

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

Cell tooltip properties set on autoGroupColumnDef (tooltipField, tooltipValueGetter, 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 tooltipValueGetter. Hover a group key to see the tooltip inherited from the underlying column.
autoGroupColumnDef defines a tooltipValueGetter. Hover a leaf row in the group column to see it.

main.ts

import {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  TooltipModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  TooltipModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  SetFilterModule,
]);

const columnDefs: ColDef[] = [
  {
    field: "country",
    width: 120,
    rowGroup: true,
    hide: true,
    // inherited by group rows in the group column
    tooltipValueGetter: (params) => `Country: ${params.value}`,
  },
  {
    field: "year",
    width: 90,
    rowGroup: true,
    hide: true,
    // inherited by group rows in the group column
    tooltipValueGetter: (params) => `Year: ${params.value}`,
  },
  { field: "athlete", width: 200 },
  { field: "age", width: 90 },
  { field: "sport", width: 110 },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  autoGroupColumnDef: {
    headerTooltip: "Group",
    minWidth: 190,
    // applies to leaf rows only; group rows inherit from their colDef
    tooltipValueGetter: (params) => `Athlete: ${params.value}`,
  },
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  tooltipShowDelay: 500,
  columnDefs: columnDefs,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });

index.html

<div id="myGrid" style="height: 100%"></div>

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.

main.ts

import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  TooltipModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  TooltipModule,
  ClientSideRowModelModule,
  RowGroupingModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    {
      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: {
    flex: 1,
    minWidth: 100,
  },
  tooltipShowDelay: 500,
  groupDisplayType: "multipleColumns",
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });

index.html

<div id="myGrid" style="height: 100%"></div>

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.

main.ts

import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  TooltipModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  TooltipModule,
  ClientSideRowModelModule,
  RowGroupingModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    {
      field: "country",
      rowGroup: true,
      hide: true,
      // shown on the full-width group row inherited from this colDef
      tooltipValueGetter: (params) => `Country: ${params.value}`,
    },
    {
      field: "year",
      rowGroup: true,
      hide: true,
      // shown on the full-width group row inherited from this colDef
      tooltipValueGetter: (params) => `Year: ${params.value}`,
    },
    { field: "athlete" },
    { field: "sport" },
    { field: "total" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  tooltipShowDelay: 500,
  groupDisplayType: "groupRows",
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });

index.html

<div id="myGrid" style="height: 100%"></div>

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.

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.

main.ts

import {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const columnDefs: ColDef[] = [
  {
    headerName: "Athlete",
    field: "athlete",
    tooltipComponentParams: { color: "#55AA77" },
    tooltipField: "country",
    headerTooltip: "Tooltip for Athlete Column Header",
  },
  {
    field: "age",
    tooltipValueGetter: (p: ITooltipParams) =>
      "Create any fixed message, e.g. This is the Athlete’s Age ",
    headerTooltip: "Tooltip for Age Column Header",
  },
  {
    field: "year",
    tooltipValueGetter: (p: ITooltipParams) =>
      "This is a dynamic tooltip using the value of " + p.value,
    headerTooltip: "Tooltip for Year Column Header",
  },
  {
    field: "sport",
    tooltipValueGetter: () => "Tooltip text about Sport should go here",
    headerTooltip: "Tooltip for Sport Column Header",
  },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  tooltipShowDelay: 500,
  tooltipMouseTrack: true,
  columnDefs: columnDefs,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });

index.html

<div id="myGrid" style="height: 100%"></div>

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.

main.ts

import {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const columnDefs: ColDef[] = [
  {
    headerName: "Athlete",
    field: "athlete",
    tooltipComponentParams: { color: "#55AA77" },
    tooltipField: "country",
    headerTooltip: "Tooltip for Athlete Column Header",
  },
  {
    field: "age",
    tooltipValueGetter: (p: ITooltipParams) =>
      "Create any fixed message, e.g. This is the Athlete’s Age ",
    headerTooltip: "Tooltip for Age Column Header",
  },
  {
    field: "year",
    tooltipValueGetter: (p: ITooltipParams) =>
      "This is a dynamic tooltip using the value of " + p.value,
    headerTooltip: "Tooltip for Year Column Header",
  },
  {
    field: "sport",
    tooltipValueGetter: () => "Tooltip text about Sport should go here",
    headerTooltip: "Tooltip for Sport Column Header",
  },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  enableBrowserTooltips: true,
  columnDefs: columnDefs,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });

index.html

<div id="myGrid" style="height: 100%"></div>

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, it is impossible to click on tooltips and hovering them has no effect. If tooltipInteraction=true is set in the gridOptions, the tooltips will not disappear while being hovered and you will be able to click and select the text within the tooltip.

const gridOptions = {
    tooltipInteraction: true,

    // other grid options ...
}

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.

main.ts

import {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const columnDefs: ColDef[] = [
  {
    headerName: "Athlete",
    field: "athlete",
    tooltipComponentParams: { color: "#55AA77" },
    tooltipField: "country",
    headerTooltip: "Tooltip for Athlete Column Header",
  },
  {
    field: "age",
    tooltipValueGetter: (p: ITooltipParams) =>
      "Create any fixed message, e.g. This is the Athlete’s Age ",
    headerTooltip: "Tooltip for Age Column Header",
  },
  {
    field: "year",
    tooltipValueGetter: (p: ITooltipParams) =>
      "This is a dynamic tooltip using the value of " + p.value,
    headerTooltip: "Tooltip for Year Column Header",
  },
  {
    field: "sport",
    tooltipValueGetter: () => "Tooltip text about Sport should go here",
    headerTooltip: "Tooltip for Sport Column Header",
  },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  tooltipShowDelay: 500,
  tooltipInteraction: true,
  columnDefs: columnDefs,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });

index.html

<div id="myGrid" style="height: 100%"></div>

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().

main.ts

import {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  RowApiModule,
  TooltipModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { CustomTooltip } from "./customTooltip";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  TooltipModule,
  ClientSideRowModelModule,
  RowApiModule,
]);

const columnDefs: ColDef[] = [
  {
    field: "athlete",
    minWidth: 150,
    tooltipField: "athlete",
    tooltipComponentParams: { type: "success" },
  },
  { field: "age", minWidth: 130, tooltipField: "age" },
  { field: "year" },
  { field: "sport" },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    tooltipComponent: CustomTooltip,
  },

  tooltipInteraction: true,
  tooltipShowDelay: 500,
  // set rowData to null or undefined to show loading panel by default
  rowData: null,
  columnDefs: columnDefs,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("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;
}

customTooltip.ts

import type { ITooltipComp, ITooltipParams } from 'ag-grid-community';

export class CustomTooltip implements ITooltipComp {
    eGui!: HTMLElement;
    params!: ITooltipParams & { type: string };

    constructor() {
        this.onFormSubmit = this.onFormSubmit.bind(this);
    }

    init(params: ITooltipParams & { type: string }) {
        this.params = params;
        const type = params.type || 'primary';
        const data = params.api!.getDisplayedRowAtIndex(params.rowIndex!)!.data;
        const eGui = (this.eGui = document.createElement('div'));

        eGui.classList.add('custom-tooltip');
        eGui.innerHTML = `
            <div class="panel panel-${type}">
                <div class="panel-heading">
                    <h3 class="panel-title">${data.country}</h3>
                </div>
                <form class="panel-body">
                    <div class="form-group">
                        <input type="text" class="form-control" id="name" placeholder="Name" autocomplete="off" value="${data.athlete}" onfocus="this.select()">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                    <p>Total: ${data.total}</p>
                </form>
            </div>`;

        eGui.querySelector('form')?.addEventListener('submit', this.onFormSubmit);
    }

    onFormSubmit(e: Event) {
        e.preventDefault();
        const { params } = this;
        const { node } = params;

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

        if (target?.value) {
            node?.setDataValue('athlete', target.value);
            if (this.params.hideTooltipCallback) {
                this.params.hideTooltipCallback();
            }
        }
    }

    getGui() {
        return this.eGui;
    }

    destroy(): void {
        this.eGui.querySelector('form')?.removeEventListener('submit', this.onFormSubmit);
    }
}

index.html

<div id="myGrid" style="height: 100%"></div>

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.

main.ts

import {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { CustomTooltip } from "./customTooltip";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const columnDefs: ColDef[] = [
  {
    headerName: "Athlete",
    field: "athlete",
    tooltipComponentParams: { color: "#55AA77" },
    tooltipField: "country",
    headerTooltip: "Tooltip for Athlete Column Header",
  },
  {
    field: "age",
    tooltipValueGetter: (p: ITooltipParams) =>
      "Create any fixed message, e.g. This is the Athlete’s Age ",
    headerTooltip: "Tooltip for Age Column Header",
  },
  {
    field: "year",
    tooltipValueGetter: (p: ITooltipParams) =>
      "This is a dynamic tooltip using the value of " + p.value,
    headerTooltip: "Tooltip for Year Column Header",
  },
  {
    field: "sport",
    tooltipValueGetter: () => "Tooltip text about Sport should go here",
    headerTooltip: "Tooltip for Sport Column Header",
  },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    tooltipComponent: CustomTooltip,
  },

  tooltipShowDelay: 0,
  tooltipHideDelay: 2000,

  // set rowData to null or undefined to show loading panel by default
  columnDefs: columnDefs,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("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;
}

customTooltip.ts

import type { ITooltipComp, ITooltipParams } from 'ag-grid-community';

export class CustomTooltip implements ITooltipComp {
    eGui: any;
    init(params: ITooltipParams & { color: string }) {
        const eGui = (this.eGui = document.createElement('div'));
        const color = params.color || '#999';

        eGui.classList.add('custom-tooltip');
        //@ts-ignore
        eGui.style['background-color'] = color;
        eGui.innerHTML = `
            <div><b>Custom Tooltip</b></div>
            <div>${params.value}</div>
        `;
    }

    getGui() {
        return this.eGui;
    }
}

index.html

<div id="myGrid" style="height: 100%"></div>

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 provide a custom tooltip.

interface ITooltipComp {
    // mandatory methods

    // Returns the DOM element for this tooltip
    getGui(): HTMLElement;

    // optional methods

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

The interface for the init parameters is as follows:

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

TooltipLocation

What part of the application is showing the tooltip, e.g. 'cell', 'header', 'menuItem' etc

TValue | null

The value to be rendered by the tooltip.

string | null

The formatted value to be rendered by the tooltip.

ColDef | ColGroupDef | null

Column / ColumnGroup definition.

Column | ColumnGroup

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.

Function

A callback function that hides the tooltip

GridApi

The grid api.

TContext

Application context as set on gridOptions.context.

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

JavaScript Data GridTooltips

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

Mouse Tracking Copy Link

Browser Tooltip Copy Link

Interactive Tooltips Copy Link

Custom Component Copy Link