Angular Data GridTooltip Component
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
to0
. - Tooltips hide in 2000ms by setting
tooltipHideDelay
to2000
. - Tooltips will be shown for the
athlete
andcountry
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:
Properties available on the ITooltipParams<TData = any, TValue = any, TContext = any>
interface.
locationTypeTooltipLocation | What part of the application is showing the tooltip, e.g. 'cell', 'header', 'menuItem' etc |
valueTypeTValue | null | The value to be rendered by the tooltip. |
value | The formatted value to be rendered by the tooltip. |
col | Column / ColumnGroup definition. |
column | Column / ColumnGroup |
row | The index of the row containing the cell rendering the tooltip. |
nodeTypeIRowNode | The row node. |
dataTypeTData | Data for the row node in question. |
hide | A callback function that hides the tooltip |
apiTypeGridApi | The grid api. |
contextTypeTContext | Application context as set on gridOptions.context . |
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.
If headerTooltip
is 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 itsheaderTooltip
config. - The column Athlete Col 2 uses
tooltipComponent
so the the value inheaderTooltip
is passed to the tooltipComponentparams
to be used. - The column group Athletes also uses
tooltipComponent
. - The
tooltipComponent
detects that it's being rendered by a header because theparams
object does not contain arowIndex
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 callinghideTooltipCallback()
.