Tooltip not working with Switch

[danmaz74]

What package has an issue

@mantine/core

Describe the bug

A tooltip wrapping a Switch doesn't show when on mouse over. The same tooltip works if wrapping a Button. See example in sandbox.

What version of @mantine/hooks page do you have in package.json?

5.10.3

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/dawn-tree-iz0mdd?file=/src/App.tsx

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

No response

[rtivital]

It is correct behavior. Tooltip relies on element ref to get a DOM node that will be used for positioning. Switch component forwards ref to underlying input element. input element is hidden so that custom UI can be rendered. Thus, Tooltip cannot be positioned correctly.

You can display a tooltip for your Switch by wrapping it with a div element.

[danmaz74]

Thank you for the clarification, but I think this should be explained in the docs, where it says that "Custom components must provide a prop to get root element ref, all Mantine components support ref out of the box.". What about: "Custom components must provide a prop to get root element ref, all Mantine components support ref out of the box, but some like Switch need to be wrapped in a div to add a Tooltip".