Black Lives Matter. Please consider donating to Black Girls Code today.

Possible to create a dcc.Tab onHover event

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!

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

Hope this helps

@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.

@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.

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)

@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.