Vue Data GridTooltips

Version 36.2.0

Tooltips can be set for cells and column headers.

main.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") {
  // Enable extended validations only for development
  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
        tooltip: ({ data }) => data?.country,
        headerTooltip: "Tooltip for Athlete Column Header",
      },
      {
        field: "age",
        tooltip: "Create any fixed message, e.g. This is the Athlete’s Age ",
        headerTooltip: "Tooltip for Age Column Header",
      },
      {
        field: "year",
        tooltip: (p) =>
          "This is a dynamic tooltip using the value of " + p.value,
        headerTooltip: "Tooltip for Year Column Header",
      },
      {
        headerName: "Hover For Tooltip",
        headerTooltip: "Column Groups can have Tooltips also",
        children: [
          {
            field: "sport",
            tooltip: "Tooltip text about Sport should go here",
            headerTooltip: "Tooltip for Sport Column Header",
          },
        ],
      },
    ]);
    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");

The following Column Definition properties configure tooltips:

TooltipDefinition

Tooltip for the cell.

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

false disables tooltip content configured on the Column Definition.

A string shows static content.

A callback resolves the content from the supplied params.

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

TooltipModule

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

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

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

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

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

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

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

TooltipLocation

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

TValue | null

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

string | null

The formatted source value, when available.

ColDef | ColGroupDef | null

Column / ColumnGroup definition.

Column | ColumnGroup | ProvidedColumnGroup

Column / ColumnGroup

number

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

IRowNode

The row node.

TData

Data for the row node in question.

GridApi

The grid api.

TContext

Application context as set on gridOptions.context.

Tooltips for Truncated Text Copy Link

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

main.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") {
  // Enable extended validations only for development
  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",
        tooltip: true,
        width: 130,
      },
      {
        field: "country",
        tooltip: true,
        headerName: "Country of Athlete",
        headerTooltip: "Country of Athlete",
        width: 100,
      },
      {
        field: "sport",
        tooltip: true,
      },
    ]);
    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");

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

Show and Hide Delay Copy Link

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

number

default: 2000

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

TooltipModule

number

default: 200

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

TooltipModule

number

default: 10000

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

TooltipModule

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

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

main.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") {
  // Enable extended validations only for development
  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" },
        tooltip: ({ data }) => data?.country,
        headerTooltip: "Tooltip for Athlete Column Header",
      },
      {
        field: "age",
        tooltip: "Create any fixed message, e.g. This is the Athlete’s Age ",
        headerTooltip: "Tooltip for Age Column Header",
      },
      {
        field: "year",
        tooltip: (p) =>
          "This is a dynamic tooltip using the value of " + p.value,
        headerTooltip: "Tooltip for Year Column Header",
      },
      {
        field: "sport",
        tooltip: "Tooltip text about Sport should go here",
        headerTooltip: "Tooltip for Sport Column Header",
      },
    ]);
    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");

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

Blank Values Copy Link

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

In the example below:

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

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TooltipCallbackParams,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";

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

ModuleRegistry.registerModules([TooltipModule, ClientSideRowModelModule]);

const getTooltip = (params: TooltipCallbackParams) =>
  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",
        tooltip: true,
      },
      {
        headerName: "B - Missing Value, WITH Tooltip",
        field: "athlete",
        tooltip: getTooltip,
      },
    ]);
    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");

Row Groups Copy Link

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

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

In the example below:

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

main.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") {
  // Enable extended validations only for development
  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
        tooltip: (params) => `Country: ${params.value}`,
      },
      {
        field: "year",
        width: 90,
        rowGroup: true,
        hide: true,
        // inherited by group rows in the group column
        tooltip: (params) => `Year: ${params.value}`,
      },
      { field: "athlete", width: 200 },
      { field: "age", width: 90 },
      { field: "sport", width: 110 },
    ]);
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      headerTooltip: "Group",
      minWidth: 190,
      // applies to leaf rows only; group rows inherit from their colDef
      tooltip: (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");

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 {
  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") {
  // Enable extended validations only for development
  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");

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 {
  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") {
  // Enable extended validations only for development
  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
        tooltip: (params) => `Country: ${params.value}`,
      },
      {
        field: "year",
        rowGroup: true,
        hide: true,
        // shown on the full-width group row inherited from this colDef
        tooltip: (params) => `Year: ${params.value}`,
      },
      { field: "athlete" },
      { field: "sport" },
      { field: "total" },
    ]);
    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");

Aggregated Cells Copy Link

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

Touch Devices Copy Link

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

Mouse Tracking Copy Link

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

main.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") {
  // Enable extended validations only for development
  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" },
        tooltip: ({ data }) => data?.country,
        headerTooltip: "Tooltip for Athlete Column Header",
      },
      {
        field: "age",
        tooltip: "Create any fixed message, e.g. This is the Athlete’s Age ",
        headerTooltip: "Tooltip for Age Column Header",
      },
      {
        field: "year",
        tooltip: (p) =>
          "This is a dynamic tooltip using the value of " + p.value,
        headerTooltip: "Tooltip for Year Column Header",
      },
      {
        field: "sport",
        tooltip: "Tooltip text about Sport should go here",
        headerTooltip: "Tooltip for Sport Column Header",
      },
    ]);
    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");

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

main.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") {
  // Enable extended validations only for development
  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" },
        tooltip: ({ data }) => data?.country,
        headerTooltip: "Tooltip for Athlete Column Header",
      },
      {
        field: "age",
        tooltip: "Create any fixed message, e.g. This is the Athlete’s Age ",
        headerTooltip: "Tooltip for Age Column Header",
      },
      {
        field: "year",
        tooltip: (p) =>
          "This is a dynamic tooltip using the value of " + p.value,
        headerTooltip: "Tooltip for Year Column Header",
      },
      {
        field: "sport",
        tooltip: "Tooltip text about Sport should go here",
        headerTooltip: "Tooltip for Sport Column Header",
      },
    ]);
    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");

Interactive Tooltips Copy Link

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

<ag-grid-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.
Tab moves focus into focusable tooltip content and Escape closes the tooltip.

main.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") {
  // Enable extended validations only for development
  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" },
        tooltip: ({ data }) => data?.country,
        headerTooltip: "Tooltip for Athlete Column Header",
      },
      {
        field: "age",
        tooltip: "Create any fixed message, e.g. This is the Athlete’s Age ",
        headerTooltip: "Tooltip for Age Column Header",
      },
      {
        field: "year",
        tooltip: (p) =>
          "This is a dynamic tooltip using the value of " + p.value,
        headerTooltip: "Tooltip for Year Column Header",
      },
      {
        field: "sport",
        tooltip: "Tooltip text about Sport should go here",
        headerTooltip: "Tooltip for Sport Column Header",
      },
    ]);
    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");

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 {
  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") {
  // Enable extended validations only for development
  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,
        tooltip: true,
        tooltipComponentParams: { type: "success" },
      },
      { field: "age", minWidth: 130, tooltip: true },
      { 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");

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

customTooltipVue.ts

export default {
    template: `
      <div class="custom-tooltip">
        <div :class="'panel panel-' + type">
          <div class="panel-heading">
            <h3 class="panel-title">{{ country }}</h3>
          </div>
          <form class="panel-body" @submit="onFormSubmit($event)">
            <div class="form-group">
              <input type="text" class="form-control" id="name" placeholder="Name" autocomplete="off" :value="athlete" @focus="$event.target.select()" />
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
            <p>Total: {{total}}</p>
          </form>
        </div>
      </div>`,
    data: function () {
        return {
            type: null,
            athlete: null,
            country: null,
            total: null,
        };
    },
    beforeMount() {
        const data = this.params.api.getDisplayedRowAtIndex(this.params.rowIndex).data;
        this.type = this.params.type || 'primary';
        this.athlete = data.athlete;
        this.country = data.country;
        this.total = data.total;
    },
    methods: {
        onFormSubmit(e) {
            e.preventDefault();
            const { params } = this;
            const { node } = params;

            const target = e.target.querySelector('input');

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

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

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  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" },
        tooltip: ({ data }) => data?.country,
        headerTooltip: "Tooltip for Athlete Column Header",
      },
      {
        field: "age",
        tooltip: "Create any fixed message, e.g. This is the Athlete’s Age ",
        headerTooltip: "Tooltip for Age Column Header",
      },
      {
        field: "year",
        tooltip: (p) =>
          "This is a dynamic tooltip using the value of " + p.value,
        headerTooltip: "Tooltip for Year Column Header",
      },
      {
        field: "sport",
        tooltip: "Tooltip text about Sport should go here",
        headerTooltip: "Tooltip for Sport Column Header",
      },
    ]);
    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");

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

customTooltipVue.ts

export default {
    template: `
      <div class="custom-tooltip" v-bind:style="{ backgroundColor: color }">
          <div><b>Custom Tooltip</b></div>
          <div>{{ value }}</div>
      </div>
    `,
    data: function () {
        return {
            color: null,
            athlete: null,
            country: null,
            total: null,
        };
    },
    beforeMount() {
        this.value = this.params.value;
        this.color = this.params.color || '#999';
    },
};

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

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

TValue | null

The resolved value to render in the tooltip.

Function

A callback function that hides the tooltip.

TooltipLocation

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

string | null

The formatted source value, when available.

ColDef | ColGroupDef | null

Column / ColumnGroup definition.

Column | ColumnGroup | ProvidedColumnGroup

Column / ColumnGroup

number

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

IRowNode

The row node.

TData

Data for the row node in question.

GridApi

The grid api.

TContext

Application context as set on gridOptions.context.

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

Vue Data GridTooltips

Tooltip Callback Copy Link

Tooltips for Truncated Text Copy Link

Show and Hide Delay Copy Link

Blank Values Copy Link

Row Groups Copy Link

Grouped Column Headers Copy Link

Full Width Group Rows Copy Link

Aggregated Cells Copy Link

Touch Devices Copy Link

Mouse Tracking Copy Link

Browser Tooltip Copy Link

Interactive Tooltips Copy Link

Custom Component Copy Link