Tooltip Component

Tooltip components allow you to add your own tooltips to the grids column header and cells. Use these when the provided tooltip component or the default browser tooltip do not meet your requirements.

Tooltip Component Interface

Implement this interface to provide a custom tooltip.

interface ITooltipComp { // mandatory methods // The init(params) method is called on the tooltip component once. See below for details on the parameters. init(params: ITooltipParams): void; // Returns the GUI for this loading cell renderer. The GUI can be a) a string of html or b) a DOM element or node. getGui(): any; } interface ITooltipParams { // the grid api api: any; // the column api columnApi: any; // the grid colDef colDef: any; // the column bound to this tooltip column: any; // the grid context context: any; // the value to be rendered by the tooltip value?: any; // the formatted value valueFormatted?: any; /* Row and Cell Params (N/A with headerTooltips) */ // the index of the row that contains the cell rendering the tooltip rowIndex?: number; // the row node node?: any; // th row node data data?: any; // the cell component scope $scope?: any; }

Registering Custom Tooltip Components

See the section registering custom components for details on registering and using custom loading cell renderers.

Default Browser Tooltip

If you don't want to use the grid's tooltip component, you can use the enableBrowserTooltips config to use the browser's default tooltip. Note: That will use the element's title attribute to display the tooltip.

Tooltip Show Delay

By default, once you hover an item, it will take 2000ms for the tooltip to be displayed. If you need to change this delay, the tooltipShowDelay config should be used.

Example: Custom Tooltip

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

  • Custom Tooltip Component is supplied by name via colDef.tooltipComponent.
  • Custom Tooltip Parameters are supplied using colDef.tooltipComponentParams.
  • Tooltips are displayed instantly by setting tooltipShowDelay to 0.

Showing Blank Values

The grid will not show a tooltip if there is no value to show. This is the default behaviour as the simplest form of tooltip will show the value it is provided without any additional information. In the simplest case, it would be wrong to show the tooltip with no value as that would result in a tooltip as a blank box.

This can be a problem if you wish a tooltip to display for blank values. For example you might want to display the tooltip "This cell has no value".

To get around this, you should utilise tooltipValueGetter to return something else when the value is blank. This is displayed in the example below.

The example below shows both displaying and not displaying the tooltip for blank values. Note the following:

  • The first three rows have athlete values of undefined, null and '' (empty string).
  • The column Athlete Col 1 uses tooltipField for the tooltip field. When there is no value (the first three rows) no tooltip is displayed.
  • The column Athlete Col 2 uses tooltipValueGetter for the tooltip field. The value getter will return a value (an object) regardless of whether the value to display is empty or not. This ensures the tooltip gets displayed even when no cell value is present.

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. But when working with custom tooltips we set use colDef.tooltipComponent to assign the column's tooltip component and the headerTooltip value will passed to the params object.
Note: If headerTooltip or tooltipValueGetter are not present, the tooltip will not be rendered.

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 it's 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 tooltipComponent detect that it's being rendered by a header because the params object does not contain a rowIndex value.

Example: Tooltips with RowGroups

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.

Example: Using Browser Tooltips

The example below demonstrates how to use the default browser tooltips.