Possible to create a dcc.Tab onHover event

Dash Python
1

I would like to add tooltips for a set of tabs in my dash app. Clicking the tabs triggers a lengthy calculation and I would like to present some summary information regarding that tab before the user clicks on it.

Also, my tabs are dynamic in case that makes a difference.

Does anyone know of a solution or possible workaround?

Thanks!

2

Hi @mbkupfer, I would recommend using the tooltip component from dash-bootstrap-components!

Hope this helps

3

@RenaudLN that is a good option, and in fact was what I wanted to use. My issue though is that my tooltips need to be dynamic, both in content and target count. For example, one state might have 2 tabs while another has 5 and in both cases, the tooltips would have different content.

4

@tcbegley, any idea on how to make dynamic tooltips? I tried defining all possible values upfront, but this gave me an error along the lines of the id not being valid.

5

Does something like this work in your case?

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html


tabs_data = [
    {
        "label": "Tab 1",
        "id": "tab-1",
        "tooltip-text": "This is tab 1",
        "content": "This is the content of tab 1",
    },
    {
        "label": "Tab 2",
        "id": "tab-2",
        "tooltip-text": "This tab is tab 2",
        "content": "Here's some stuff under tab 2",
    },
    {
        "label": "Other",
        "id": "tab-other",
        "tooltip-text": "This is a different tab",
        "content": "Blah blah blah",
    },
]

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

tabs = dcc.Tabs(
    [
        dcc.Tab(
            html.Div(tab["content"], className="p-2"),
            label=tab["label"],
            id=tab["id"],
        )
        for tab in tabs_data
    ]
)

tooltips = [
    dbc.Tooltip(tab["tooltip-text"], target=tab["id"]) for tab in tabs_data
]

app.layout = dbc.Container([tabs] + tooltips, className="p-3")

if __name__ == "__main__":
    app.run_server(debug=True)
6

@tcbegley would this be able to be dynamic? For instance, could I change both the tabs and tooltips in one callback? I guess I’d need to update the whole container, but I haven’t tried that out yet so not sure how that’d work.