I added a custom tooltip to my Dash AG grid according to these instructions: https://dash.plotly.com/dash-ag-grid/tooltips. Now, the cell that contains my tooltip data may have one or multiple line breaks (indicated by \n), and they are ignored in the tooltip. However, I want them to be displayed.
Here is a minimum example of my .py code:
import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd
data = {
"ticker": ["AAPL", "MSFT", "AMZN", "GOOGL"],
"company": ["Apple or a very long name to describe Apple in some sense in which line breaks HERE \n would be very nice for readability.", "Microsoft", "Amazon", "Alphabet"],
}
df = pd.DataFrame(data)
columnDefs = [
{
"headerName": "Stock Ticker",
"field": "ticker",
"tooltipField": 'ticker',
"tooltipComponentParams": { "color": '#d8f0d3' },
},
{
"headerName": "Company",
"field": "company",
}
]
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)
And then the underlying .js code:
var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};
dagcomponentfuncs.CustomTooltip = function (props) {
info = [
React.createElement('h5', {}, 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
);
};
Hope anyone can help me out!