Tooltips

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 the
  tooltip to apply to the cell.
• tooltipValueGetter (function)
  Function that should return the string to use for a tooltip, tooltipField takes precedence if set. If using a
  custom tooltipComponent 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.

Default Browser Tooltip

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.

Custom Tooltip Component

It is possible to build your own Custom Tooltip Component.

Header Tooltips

See Header Tooltips for how to configure
tooltips on column headers.

Tooltip Show and Hide Delay

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.

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 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:

• The first two rows have athlete values of '' (empty string) and None.
• The column Athlete 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.
• The column Age uses tooltipField for the tooltip field. When there is no value (the first two rows) no
  tooltip is displayed.

Tooltips With Row Groups

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

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 Grid Options.

dashGridOptions = {'tooltipMouseTrack': True}

Interactive Tooltips

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:

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