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.

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

The Custom Tooltip Component is defined in the dashAgGridComponentFunctions.js file in the assets folder.
The Custom Tooltip Component is supplied by name via tooltipComponent.
The Custom Tooltip Parameters (for tooltip background color) are supplied using tooltipComponentParams.
Tooltips are displayed instantly by setting tooltipShowDelay to 0.
Tooltips hide in 2000ms by setting tooltipHideDelay to 2000.
Tooltip is shown for the ticker column

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd

data = {
    "ticker": ["AAPL", "MSFT", "AMZN", "GOOGL"],
    "company": ["Apple", "Microsoft", "Amazon", "Alphabet"],
    "price": [154.99, 268.65, 100.47, 96.75],
}
df = pd.DataFrame(data)

columnDefs = [
    {
        "headerName": "Stock Ticker",
        "field": "ticker",
        "tooltipField": 'ticker',
        "tooltipComponentParams": { "color": '#d8f0d3' },

    },
    {
        "headerName": "Company",
        "field": "company",
    },
    {
        "headerName": "Last Close Price",
        "field": "price",
        "valueFormatter": {"function": """d3.format("($,.2f")(params.value)"""},
        "editable": True,
    },
]


grid = dag.AgGrid(
    id="tooltip-simple-example",
    columnDefs=columnDefs,
    rowData=df.to_dict("records"),
    columnSize="sizeToFit",
    defaultColDef={"editable": False,  "tooltipComponent": "CustomTooltip"},
    dashGridOptions={"tooltipShowDelay": 100}
)


app = Dash(__name__)

app.layout = html.Div(
    [dcc.Markdown("Example of custom tooltip"), grid],
    style={"margin": 20},
)

if __name__ == "__main__":
    app.run(debug=True)


"""
Put the following in the dashAgGridComponentFunctions.js file in the assets folder

-----------

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


dagcomponentfuncs.CustomTooltip = function (props) {
    info = [
        React.createElement('h4', {}, props.data.ticker),
        React.createElement('div', {}, props.data.company),
        React.createElement('div', {}, props.data.price),
    ];
    return React.createElement(
        'div',
        {
            style: {
                border: '2pt solid white',
                backgroundColor: props.color || 'grey',
                padding: 10,
            },
        },
        info
    );
};


"""

Example of custom 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.

Custom Tooltip

Dynamic Tooltip