---
title: "Tooltips"
framework: javascript
version: "36.1.0"
---

# Tooltips

Tooltips can be set for Cells and Column Headers.

#### Tooltips

```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);
  });
```

[Live example: Tooltips](https://www.ag-grid.com/examples/tooltips/tooltips/typescript)

The following [Column Definition](https://www.ag-grid.com/javascript-data-grid/column-definitions/) properties set Tooltips:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `tooltipField` | `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. Module: [`TooltipModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `tooltipValueGetter` | `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. Module: [`TooltipModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |

## Tooltips for Truncated Text

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

#### Tooltips

```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);
  });
```

[Live example: Tooltips](https://www.ag-grid.com/examples/tooltips/tooltip-show-mode/typescript)

> **Note**
>
> `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

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `tooltipShowDelay` | `number` |  | `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`. Module: [`TooltipModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `tooltipSwitchShowDelay` | `number` |  | `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`. Module: [`TooltipModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `tooltipHideDelay` | `number` |  | `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`. Module: [`TooltipModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |

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

    // other grid options ...
}
```

#### Show Hide Delay

```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);
  });
```

[Live example: Show Hide Delay](https://www.ag-grid.com/examples/tooltips/show-hide-delay/typescript)

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

## Blank Values

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.

#### Blank Values

```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);
  });
```

[Live example: Blank Values](https://www.ag-grid.com/examples/tooltips/blank-values/typescript)

## Row Groups

When a column is grouped, the generated group column inherits the tooltip properties from the underlying column's [Column Definition](https://www.ag-grid.com/javascript-data-grid/column-definitions/): `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.

#### Row Group Tooltip

```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);
  });
```

[Live example: Row Group Tooltip](https://www.ag-grid.com/examples/tooltips/rowgroups-tooltip/typescript)

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

### Grouped Column Headers

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.

#### Grouped Column Header Tooltip

```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);
  });
```

[Live example: Grouped Column Header Tooltip](https://www.ag-grid.com/examples/tooltips/rowgroups-header-tooltip/typescript)

### Full Width Group Rows

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.

#### Full Width Group Row Tooltip

```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);
  });
```

[Live example: Full Width Group Row Tooltip](https://www.ag-grid.com/examples/tooltips/rowgroups-fullwidth-tooltip/typescript)

### Aggregated Cells

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

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.

#### Tooltip Mouse Tracking

```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);
  });
```

[Live example: Tooltip Mouse Tracking](https://www.ag-grid.com/examples/tooltips/tooltip-mouse-tracking/typescript)

## Browser Tooltip

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

#### Default Browser Tooltip

```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);
  });
```

[Live example: Default Browser Tooltip](https://www.ag-grid.com/examples/tooltips/default-tooltip/typescript)

## Interactive Tooltips

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.

```js
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.

#### Tooltip Interaction

```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);
  });
```

[Live example: Tooltip Interaction](https://www.ag-grid.com/examples/tooltips/tooltip-interaction/typescript)

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

#### Custom Tooltip Interaction

```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);
  });
```

[Live example: Custom Tooltip Interaction](https://www.ag-grid.com/examples/tooltips/custom-tooltip-interaction/typescript)

## Custom Component

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.

#### Custom Tooltip Component

```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);
  });
```

[Live example: Custom Tooltip Component](https://www.ag-grid.com/examples/tooltips/custom-tooltip-component/typescript)

Implement this interface to provide a custom tooltip.

```ts
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&lt;TData = any, TValue = any, TContext = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `location` | `TooltipLocation` |  |  | What part of the application is showing the tooltip, e.g. 'cell', 'header', 'menuItem' etc |
| `value` | [`TValue \| null`](https://www.ag-grid.com/javascript-data-grid/typescript-generics/#cell-value-tvalue) |  |  | The value to be rendered by the tooltip. |
| `valueFormatted` | `string \| null` |  |  | The formatted value to be rendered by the tooltip. |
| `colDef` | `ColDef \| ColGroupDef \| null` |  |  | Column / ColumnGroup definition. |
| `column` | `Column \| ColumnGroup` |  |  | Column / ColumnGroup |
| `rowIndex` | `number` |  |  | The index of the row containing the cell rendering the tooltip. |
| `node` | [`IRowNode`](https://www.ag-grid.com/javascript-data-grid/row-object/) |  |  | The row node. |
| `data` | [`TData`](https://www.ag-grid.com/javascript-data-grid/typescript-generics/#row-data-tdata) |  |  | Data for the row node in question. |
| `hideTooltipCallback` | `Function` |  |  | A callback function that hides the tooltip |
| `api` | [`GridApi`](https://www.ag-grid.com/javascript-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/javascript-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |