JavaScript Data GridTooltips

Tooltips can be set for Cells and Column Headers.

The following Column Definition properties set Tooltips:

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

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.

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 gridOptions = {
    tooltipInteraction: true,

    // other grid options ...
}

The example below enables Tooltip Interaction to demonstrate a scenario where tooltips will not disappear while hovered. Note following:

• Tooltips will not disappear while being hovered.
• Tooltips content can be selected and copied.

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.

interface ITooltipComp {
    // mandatory methods

    // Returns the DOM element for this tooltip
    getGui(): HTMLElement;

    // optional methods

    // The init(params) method is called on the tooltip component once.
    // See below for details on the parameters.
    init(params: ITooltipParams): void;
}