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.
For an example of a basic text tooltip for column headers, see the column headers page.
The example below demonstrates how to provide custom tooltips to the grid. In the example:
dashAgGridComponentFunctions.js
file in the assets
folder.tooltipComponent
.tooltipComponentParams
.tooltipShowDelay
to 0.tooltipHideDelay
to 2000.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