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

Implementing a Tooltip Component

When a tooltip component is instantiated the full properties available as inputs are detailed
in AG Grid docs.

Moreover, the behavior of the tooltip can be modified through the Grid Options:

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.

Simple Custom Tooltip

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

View Custom Tooltip Renderer used for this example.

This JavaScript function must be added to the dashAgGridComponentFunctions.js file in the assets folder.
See Custom Components for more
information.

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.CustomTooltipSimple = function (props) {
    return React.createElement(
        'div',
        {
            style: {
                border: '5px double',
                backgroundColor: props.color || 'grey',
                padding: 10,
            },
        },
        [
            React.createElement('b', {}, props.data.athlete),
            React.createElement('div', {}, 'Country: ' + props.data.country),
            React.createElement('div', {}, 'Total: ' + props.data.total),
        ]
    );
};

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 the Column Definition 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:

View Custom Tooltip Renderer used for this example.

This JavaScript function must be added to the dashAgGridComponentFunctions.js file in the assets folder.
See Custom Components for more
information.

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});


dagcomponentfuncs.CustomTooltipHeaders = function (props) {
    const isCell = props.rowIndex !== undefined;
    const isGroupedHeader = !isCell && !!props.colDef.children;

    const children = [React.createElement('div', {}, props.value)];

    // if tooltip of the group header: append columns names list
    if (isGroupedHeader) {
        const headerNames = [];
        props.colDef.children.forEach(
            header => {
                headerNames.push(
                    header.headerName
                        ? header.headerName
                        : header.field.charAt(0).toUpperCase() + header.field.slice(1) //capitalize the field name
                )
            }
        )

        children.push(
            React.createElement('div', {}, `(${headerNames.join(" - ")})`)
        )
    }

    // if tooltip of the cells: add in first line the column headerTooltip text
    if (isCell) {
        children.unshift(
            React.createElement('b', {},
                props.colDef.headerTooltip
                    ? props.colDef.headerTooltip + ':'
                    : props.colDef.field.charAt(0).toUpperCase() + props.colDef.field.slice(1) + ':' //capitalize the field name
            )
        )
    }

    const eltProps = {style: {border: '5px double', backgroundColor: '#119dff', padding: 10},}

    return React.createElement('div', eltProps, children)
};

Interactive Custom Tooltips

The example below enables tooltip interaction with custom tooltips. Note following:

It’s important to keep in mind that one figure is created per row. If data contains thousands of rows, it may be a
good idea to consider using Infinite Row Model and
creating the figures as the rows are loaded to improve performance.

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')
}

View Custom Tooltip Renderers used for this example.

Those JavaScript functions must be added to the dashAgGridComponentFunctions.js file in the assets folder.
See Custom Components for more
information.

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.DMC_ColorPicker = function (props) {
    const selector = `#${props.gridId} [row-index="${props.rowIndex}"] [col-id="${props.column.colId}"]`
    const cell = document.querySelector(selector);

    function onChange(colorPickerValue) {
        cell.style.backgroundColor = colorPickerValue
    }

    return React.createElement(
        window.dash_mantine_components.ColorPicker,
        {onChange}
    );
};

dagcomponentfuncs.FigTooltip = function (props) {
    return React.createElement(
        window.dash_core_components.Graph,
        {
            figure: props.value,
            config: {displayModeBar: false}
        }
    )
};