React Data GridTooltips

Tooltips can be set for Cells and Column Headers.

The following Column Definition properties set Tooltips:

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

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:

const tooltipShowDelay = 0;
const tooltipSwitchShowDelay = 1000;
const tooltipHideDelay = 2000;

<AgGridReact
    tooltipShowDelay={tooltipShowDelay}
    tooltipSwitchShowDelay={tooltipSwitchShowDelay}
    tooltipHideDelay={tooltipHideDelay}
/>

Blank Values Copy Link

Tooltips are not shown for the missing values undefined, null and "" (empty String). To display tooltips for missing values, provide a tooltipValueGetter to return something that is not empty.

In the example below:

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

Row Groups Copy Link

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

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

In the example below:

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

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.

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.

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.

Browser Tooltip Copy Link

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

Interactive Tooltips Copy Link

By default, it is impossible to click on tooltips and hovering them has no effect. If tooltipInteraction=true is set in the gridOptions, the tooltips will not disappear while being hovered and you will be able to click and select the text within the tooltip.

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