dmc.SegmentedControl with ToolTips or HoverCards?

Dash Python
1

I have a dmc.SegmentedControl with icons as options. I would like a tooltip or hovercard to appear when hovering over individual options rather than the whole SegmentedControl. Is this possible to do? I can’t find any examples that have achieved this.

2

Hi @bweinberg

Yes, this is possible. Put the tooltip in the label.

Here is an example based on the docs components as labels example


import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, Input, Output, html, callback

_dash_renderer._set_react_version("18.2.0")
from dash_iconify import DashIconify

app = Dash(external_stylesheets=dmc.styles.ALL)

data = [
    ["Preview", "tabler:eye"],
    ["Code", "tabler:code"],
    ["Export", "tabler:external-link"],
]

component = html.Div(
    [
        dmc.SegmentedControl(
            id="segmented-with-react-nodes",
            value="Preview",
            data=[
                {
                    "value": v,
                    "label": dmc.Tooltip(
                        label=f"tooltip {v}",
                        children=dmc.Center(
                            [DashIconify(icon=icon, width=16), html.Span(v)],
                            style={"gap": 10},
                        ),
                    ),
                }
                for v, icon in data
            ],
            mb=10,
        ),
        dmc.Text(id="segmented--value-data"),
    ]
)


app.layout = dmc.MantineProvider(component)


@callback(
    Output("segmented--value-data", "children"),
    Input("segmented-with-react-nodes", "value"),
)
def update_value(value):
    return value


if __name__ == "__main__":
    app.run(debug=True)
1 Like
3

Thank you. I should have thought to try that!

1 Like