React Data GridTooltips

Tooltips can be set for Cells and Column Headers.

The following Column Definition properties set Tooltips:

tooltipField
ColDefField
The field of the tooltip to apply to the cell.
tooltipValueGetter
Function
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.
headerTooltip
string
Tooltip for the column header

Show and Hide Delay

Tooltips show after 2 seconds and hide after 10 seconds. Set tooltipShowDelay and tooltipHideDelay to override these values. The example below has tooltipShowDelay=0 (shows immediatly) and tooltipHideDelay=2000 (hides in 2,000 milliseconds, or 2 seconds).

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

Row Groups

The example below shows how to use the default tooltip component with group columns. Because the group column has no real field assigned to it, the tooltipValueGetter function must be used.

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.

Browser Tooltip

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

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.

const tooltipInteraction = true;

<AgGridReact tooltipInteraction={tooltipInteraction} />

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.

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

When a tooltip component is instantiated then the following will be made available on props:

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

location
TooltipLocation
What part of the application is showing the tooltip, e.g. 'cell', 'header', 'menuItem' etc
value
TValue | null
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.
The row node.
data
TData
Data for the row node in question.
hideTooltipCallback
Function
A callback function that hides the tooltip
The grid api.
context
TContext
Application context as set on gridOptions.context.