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

# Tooltips

Tooltips can be set for Cells and Column Headers.

#### Tooltips

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :tooltipShowDelay="tooltipShowDelay"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<(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",
          },
        ],
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const tooltipShowDelay = ref(500);
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      tooltipShowDelay,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

The following [Column Definition](https://www.ag-grid.com/vue-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/vue-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/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :tooltipShowDelay="tooltipShowDelay"
      :tooltipShowMode="tooltipShowMode"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "athlete",
        tooltipField: "athlete",
        width: 130,
      },
      {
        field: "country",
        tooltipField: "country",
        headerName: "Country of Athlete",
        headerTooltip: "Country of Athlete",
        width: 100,
      },
      {
        field: "sport",
        tooltipField: "sport",
      },
    ]);
    const tooltipShowDelay = ref(500);
    const tooltipShowMode = ref<"standard" | "whenTruncated">("whenTruncated");
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      tooltipShowDelay,
      tooltipShowMode,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

> **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/vue-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/vue-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/vue-data-grid/modules/). |

```ts
<ag-grid-vue
    :tooltipShowDelay="tooltipShowDelay"
    :tooltipSwitchShowDelay="tooltipSwitchShowDelay"
    :tooltipHideDelay="tooltipHideDelay"
    /* other grid options ... */>
</ag-grid-vue>

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

#### Show Hide Delay

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :tooltipShowDelay="tooltipShowDelay"
      :tooltipSwitchShowDelay="tooltipSwitchShowDelay"
      :tooltipHideDelay="tooltipHideDelay"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const tooltipShowDelay = ref(0);
    const tooltipSwitchShowDelay = ref(1000);
    const tooltipHideDelay = ref(2000);
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      tooltipShowDelay,
      tooltipSwitchShowDelay,
      tooltipHideDelay,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

> **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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :tooltipShowDelay="tooltipShowDelay"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        headerName: "A - Missing Value, NO Tooltip",
        field: "athlete",
        tooltipField: "athlete",
      },
      {
        headerName: "B - Missing Value, WITH Tooltip",
        field: "athlete",
        tooltipValueGetter: toolTipValueGetter,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const tooltipShowDelay = ref(500);
    const rowData = ref<any[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        // set some blank values to test tooltip against
        data[0].athlete = undefined;
        data[1].athlete = null;
        data[2].athlete = "";
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      tooltipShowDelay,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :autoGroupColumnDef="autoGroupColumnDef"
      :defaultColDef="defaultColDef"
      :tooltipShowDelay="tooltipShowDelay"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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 },
    ]);
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      headerTooltip: "Group",
      minWidth: 190,
      // applies to leaf rows only; group rows inherit from their colDef
      tooltipValueGetter: (params) => `Athlete: ${params.value}`,
    });
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const tooltipShowDelay = ref(500);
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      autoGroupColumnDef,
      defaultColDef,
      tooltipShowDelay,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

> **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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowGroupingDisplayType,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :tooltipShowDelay="tooltipShowDelay"
      :groupDisplayType="groupDisplayType"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const tooltipShowDelay = ref(500);
    const groupDisplayType = ref<RowGroupingDisplayType>("multipleColumns");
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      tooltipShowDelay,
      groupDisplayType,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

### 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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowGroupingDisplayType,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :tooltipShowDelay="tooltipShowDelay"
      :groupDisplayType="groupDisplayType"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        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" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const tooltipShowDelay = ref(500);
    const groupDisplayType = ref<RowGroupingDisplayType>("groupRows");
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      tooltipShowDelay,
      groupDisplayType,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

### 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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :tooltipShowDelay="tooltipShowDelay"
      :tooltipMouseTrack="true"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const tooltipShowDelay = ref(500);
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      tooltipShowDelay,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :enableBrowserTooltips="true"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

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

```ts
<ag-grid-vue
    :tooltipInteraction="tooltipInteraction"
    /* other grid options ... */>
</ag-grid-vue>

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.

#### Tooltip Interaction

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :tooltipShowDelay="tooltipShowDelay"
      :tooltipInteraction="true"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const tooltipShowDelay = ref(500);
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      tooltipShowDelay,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowApiModule,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import CustomTooltip from "./customTooltipVue";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :tooltipInteraction="true"
      :tooltipShowDelay="tooltipShowDelay"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    CustomTooltip,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "athlete",
        minWidth: 150,
        tooltipField: "athlete",
        tooltipComponentParams: { type: "success" },
      },
      { field: "age", minWidth: 130, tooltipField: "age" },
      { field: "year" },
      { field: "sport" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
      tooltipComponent: "CustomTooltip",
    });
    const tooltipShowDelay = ref(500);
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      tooltipShowDelay,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ITooltipParams,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import CustomTooltip from "./customTooltipVue";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :tooltipShowDelay="tooltipShowDelay"
      :tooltipHideDelay="tooltipHideDelay"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    CustomTooltip,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
      tooltipComponent: "CustomTooltip",
    });
    const tooltipShowDelay = ref(0);
    const tooltipHideDelay = ref(2000);
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      tooltipShowDelay,
      tooltipHideDelay,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

When a custom tooltip component is instantiated then the following will be made available on `this.params`:

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/vue-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/vue-data-grid/row-object/) |  |  | The row node. |
| `data` | [`TData`](https://www.ag-grid.com/vue-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/vue-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/vue-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |