Tooltips can be displayed when you hover over the grid’s column headers and cells.
To enable tooltips on columns, set tooltipField
or tooltipValueGetter
on the Column Definition.
tooltipField
(string) The field of thetooltipValueGetter
(function)tooltipField
takes precedence if set. If using atooltipComponent
you may return any custom value to be passed to your tooltip component.The following example uses tooltipField
for the Athlete, Age and Country columns and a custom function
defined with tooltipValueGetter
for the Year and Sport columns.
If you don’t want to use the grid’s tooltip component, you can use the Grid Option enableBrowserTooltips
to use the
browser’s default tooltip. The grid will simply set an element’s title attribute to display the tooltip.
dashGridOptions = {'enableBrowserTooltips': True}
Here is the same example as above but using the default browser tooltips.
It is possible to build your own Custom Tooltip Component.
See Header Tooltips for how to configure
tooltips on column headers.
By default, when you hover on an item, it will take 2 seconds for the tooltip to be displayed and then 10 seconds for
the tooltip to hide. If you need to change these delays, the tooltipShowDelay
and tooltipHideDelay
configs should be
used, which are set in milliseconds.
The delays will have no effect if you are using browser tooltips, as they are controlled entirely by the browser.
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 this case, it would be strange to show
the tooltip with no value as that would show 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 a
tooltip saying “This cell has no value” instead. To achieve this, you should utilise tooltipValueGetter to return
something different when the value is blank.
The example below shows both displaying and not displaying the tooltip for blank values. Note the following:
''
(empty string) and None
.tooltipValueGetter
for the tooltip field. The value getter will return a value (antooltipField
for the tooltip field. When there is no value (the first two rows) noBecause the group column has no real field assigned to it, the tooltipValueGetter
function must be used.
Row grouping is an enterprise feature, see example
in AG Grid docs.
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 Grid Options.
dashGridOptions = {'tooltipMouseTrack': True}
By default, it is impossible to click on tooltips and hovering them has no effect. If tooltipInteraction
is set to
True in the Grid Options, the tooltips will not disappear while being hovered, and you will be able to click and select
the text within the tooltip.
dashGridOptions = {'tooltipInteraction': True}
The example below enables tooltip interaction to demonstrate a scenario where tooltips will not disappear while hovered.
Note following: