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.

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:

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}

This parameter can be particularly useful when using custom tooltips containing interactive components as shown
in Interactive Custom Tooltips.

The example below enables tooltip interaction to demonstrate a scenario where tooltips will not disappear while hovered.
Note following:

Dynamic Tooltip

When working with Custom Cell Renderers it is possible to register custom tooltips that are displayed dynamically by
using the setTooltip method.

For more information and an example of a toolip that displays on truncated cell values see
the Cell Rendering.

Under most scenarios, the tooltips will fit inside the grid. However, if the grid is small and / or the tooltip is
large, then the tooltips will not fit inside the grid or will not be in the right position, leading to a bad user
experience.

The solution is to set the popupParent element:

Each mechanism allows you to set the popup parent to any HTML DOM element. The element must:

Most of the time, you will simply set the popup parent to the document body.

Note that, this parameter applies to all popups elements, not only the tooltips.

See in the following example how the tooltip content of the Year column extends beyond the grid boundary.

This parameter can be particularly useful when using custom tooltips, for example containing graphs as shown
in Interactive Custom Tooltips.

View the JavaScript function used for this example.

This JavaScript function must be added to the dashAgGridFunctions.js file in the assets folder.
See JavaScript Functions
for more information.

var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

dagfuncs.setPopupsParent = () => {
    return document.querySelector('body')
}