0

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!

Jordi
  • 361
  • 1
  • 4
  • 14

0 Answers0