Unable to set width of component to `100%` inside `Tooltip`

[TimChild]

trafficstars

If I wrap a component in Tooltip, I am not longer able to set the width of the inner component to 100% and have it fill the outer container. I can see that the Tooltip creates a div that wraps the contents that looks like this:

<div class="mantine-1avyp1d" style="width: fit-content;">...</div>

It's that fit-content that is causing me problems, but I don't see any way to access it. I can only change the behaviour of the tooltip window that pops up with e.g. dmc.Tooltip(..., w='100%').

If I set the className of the tooltip, that does show up in that div, but setting width in a stylesheet is overridden by the fit-content.

Any ideas on how I can change that value, or where it is being set?

[CNFeffery]

@TimChild Can you provide code to reproduce the problem?

[TimChild]

@CNFeffery, sure! I should have included one in the first place, sorry about that.

import dash_mantine_components as dmc
import dash


app = dash.Dash(__name__)

app.layout = dmc.MantineProvider(
    children=dmc.Stack(
        [
            dmc.Textarea(value="This one stretches to the full width of the stack container", w="100%"),
            dmc.Tooltip(
                label="tooltip label",
                children=dmc.Textarea(
                    value="I would expect this one to also fill the full width, but it does not.", w="100%"
                ),
            ),
        ],
        w="500px",
        style={"border": "1px solid black"},
    )
)


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

[CNFeffery]

@TimChild As an inline style, it is challenging to address the issue with DMC. I suggest you consider using fac.AntdTooltip() ( https://fac.feffery.tech/AntdTooltip ). Here is a simple example:

import dash_mantine_components as dmc
import feffery_antd_components as fac
import dash


app = dash.Dash(__name__)

app.layout = dmc.MantineProvider(
    children=dmc.Stack(
        [
            dmc.Textarea(
                value="This one stretches to the full width of the stack container", w="100%"),
            dmc.Tooltip(
                label="tooltip label",
                children=dmc.Textarea(
                    value="I would expect this one to also fill the full width, but it does not.", w="100%"
                ),
            ),
            fac.AntdTooltip(
                dmc.Textarea(
                    value="I would expect this one to also fill the full width, but it does not.", w="100%"
                ),
                title='tooltip label'
            )
        ],
        w="500px",
        style={"border": "1px solid black"},
    )
)


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

[TimChild]

@CNFeffery Thanks. Your component does have the desired behaviour I was looking for there.

@snehilvj , Any chance this is an easy thing to fix in dash-mantine-components? Or am I overlooking the reason why the fit-content inline style is applied in the first place?