Are Dash AG Tooltips not working?

Dash Python
1

I’m moving from Dash Table to Dash AG Grid. I’d like to have tooltips on my table cells and was following this page: Tooltips | Dash for Python Documentation | Plotly

The examples on that page don’t have any tooltips and I also can’t get tooltips working in my test case. Is there something wrong with Tooltips or a bug? This is what my test/playground looks like:

columnDefs = [
        {
            "headerName": "Identification",
            "children": [
                {"field": "iata", "pinned": "left"},
                {"field": "airport"},
            ],
        },
        {
            "headerName": "Location",
            "children": [
                {
                    "field": "city",
                    "tooltipField": "testing here",
                    "headerTooltip": "my header here",
                },
                {"field": "state"},
                {"field": "country"},
            ],
        },
        {
            "headerName": "Coordinates",
            "children": [
                {"field": "lat"},
                {"field": "lon"},
            ],
        },
        {
            "headerName": "",
            "children": [
                {"field": "cnt"},
            ],
        },
    ]
    df = pd.read_csv(
        "https://raw.githubusercontent.com/plotly/datasets/master/2011_february_us_airport_traffic.csv"
    )

    layout = html.Div(
        [
            dag.AgGrid(
                id="get-started-example-basic",
                rowData=df.to_dict("records"),
                columnDefs=columnDefs,
            )
        ]
  )
2

Hello @spicycactus,

Welcome to the community!

I’d recommend enableBrowserTooltips, this will make it easy to see.

The default time it takes to show a tooltip is also 2 seconds, which feels like an eternity! So you can decrease that by using showTooltipDelay to what Ms you want.

1 Like
3

@jinnyzor Thank you for the quick reply! The long delay was what was confusing me - I wasn’t patient enough to keep my mouse hovered for 2 seconds.

Another question: I can see that you can pass in functions like

'tooltipValueGetter': {"function": "params.data.athlete + ' was ' + params.data.age + ' in ' + params.value"},

Instead of passing in a string, is it possible to define an actual function and pass it in somehow? E.g.

def my_test_function(params):
  return "params.data.athlete + ' was ' + params.data.age + ' in ' + params.value"

The reason is because I may want to do some more complex things, like call other functions to calculate a value to show in the tooltip and writing it as a string may get messy

Same question for conditional cell styling (doc): Can I style a condition using a function rather than an inline string?

            "styleConditions": [
                {
                    "condition": "[5,6,7].includes(params.value)",
                    "style": {"backgroundColor": "sandybrown"},
                },
                {
                    "condition": "params.value >= 8",
                    "style": {"backgroundColor": "lightcoral"},
                },
            ],
4

Yes, you should be able to pass functions from the dedicated namespace for ag grid functions, in js, not python. :slight_smile:

5

Do you know if there are any workarounds in Python?

6

Hi @spicycactus

You might find this AG Grid Tooltip Tutorial helpful

2 Likes