Tooltip for Button in ButtonGroup

[idling-mind]

hi,
What would be the best way to add tooltips for buttons in groups. When i wrap a button in a dmc.Tooltip component, the button doesnt look as if part of the group anymore (with border radius applied).

dmc.ButtonGroup(
                children=[
                    dmc.Tooltip(
                    dcc.Upload(
                        id="upload-layout",
                        children=dmc.Button(
                            "Upload Layout",
                            leftSection=DashIconify(icon="mdi:upload"),
                            **button_settings,
                        ),
                    ),
                        label="Upload a JSON file to load a layout.",
                    ),
                    dmc.Tooltip(
                    dmc.Button(
                        id="download-layout",
                        leftSection=DashIconify(icon="mdi:download"),
                        children="Download Layout",
                        **button_settings,
                    ),
                        label="This will download the current layout as a JSON file.",
                    ),
                    dmc.Tooltip(
                    dmc.Button(
                        id="reset-layout",
                        leftSection=DashIconify(icon="mdi:restore"),
                        children="Reset Layout",
                        **button_settings,
                    ),
                        label="This will reset the layout to the default layout.",
                    ),
                    dmc.Tooltip(
                    dmc.Button(
                        id="save-layout",
                        leftSection=DashIconify(icon="mdi:content-save"),
                        children="Save Layout",
                        **button_settings,
                    ),
                        label="This will save the current layout to the browser's local storage.",
                    ),
                    dmc.Tooltip(
                    dmc.Button(
                        id="clear-layout",
                        leftSection=DashIconify(icon="mdi:delete"),
                        children="Clear Layout",
                        color="red",
                        **button_settings,
                    ), 
                        label="This will clear all cards from the layout.",
                    ),
                ]
            )

[AnnMarieW]

@idling-mind
Great question! It looks like it's not possible. The upstream Mantine docs includes this warning:

Note that you must not wrap child Button components with any additional elements:

https://mantine.dev/core/button/#buttongroup

I just opened an issue in the docs to include that in the dmc-docs too.

[idling-mind]

@AnnMarieW , thanks for the quick reply. For now, I changed them to actionicons and wrapped the icon with tooltip. This doesn't cause the current issue. However I had to play around a bit with padding and margins to increase the hover area.