Angular Data GridTooltip Component

ReactAngularVueJavascript

Tooltip components allow you to add your own Tooltips to the grid's column headers and cells. Use these when the provided tooltip component or the Default Browser Tooltip do not meet your requirements.

The example below demonstrates how to provide custom tooltips to the grid. Notice the following:

• The Custom Tooltip Component is supplied by name via colDef.tooltipComponent.
• The Custom Tooltip Parameters (for tooltip background color) are supplied using colDef.tooltipComponentParams.
• Tooltips are displayed instantly by setting tooltipShowDelay to 0.
• Tooltips hide in 2000ms by setting tooltipHideDelay to 2000.
• Tooltips will be shown for the athlete and country columns

Implementing a Tooltip Component

Implement this interface to create a tooltip component.

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

The agInit(params) method takes a params object with the items listed below:

Registering Custom Tooltip Components

See Registering Custom Components for details on registering and using custom tooltip components.

Header Tooltip with Custom Tooltip

When we want to display a header tooltip, we set the headerTooltip config as a string, and that string will be displayed as the tooltip. However, when working with custom tooltips we set colDef.tooltipComponent to assign the column's tooltip component and the headerTooltip value will passed to the params object.

The example below shows how to set a custom tooltip to a header and to a grouped header. Note the following:

• The column Athlete Col 1 does not have a tooltipComponent so it will render the value set in its headerTooltip config.
• The column Athlete Col 2 uses tooltipComponent so the the value in headerTooltip is passed to the tooltipComponent params to be used.
• The column group Athletes also uses tooltipComponent.
• The tooltipComponent detects that it's being rendered by a header because the params object does not contain a rowIndex value.

Interactive Custom Tooltips

The example below enables tooltip interaction with custom tooltips. Note following:

• Tooltip is enabled for the Athlete and Country 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().