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

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

Custom Tooltip