Tooltip not working in combination with Switch

[danieldeichfuss]

Project Information

Cloudflare Integration Extensions

Feedback

I noticed that the Tooltip component doesn't have any effect when used for a Switch. It works fine when I test with a Button instead of a Switch.

[Jan-Eimertenbrink]

Hey Daniel, a tooltip should primarily be used for interactive UI elements that require explanation – for example, icon buttons, where it helps provide better context for the user.

The design system Primer (GitHub) recommends:

• Reserve tooltips for components like icon buttons.
• Keep your tooltip text minimal.
• Only include tooltips on other components as a last resort.
• Never include tooltips on non-interactive components (div, span, p).

A switch has a label that already explains its function, so it usually doesn’t need a tooltip. I’m also not aware of any case where a switch has a tooltip. Do you have any examples? Or what use case do you have where the switch would need to support a tooltip?

[danieldeichfuss]

Hi Jan, thank you for the infos. I get your point, but I can definitely see scenarios where a Tooltip would be helpful with a Switch for additional context. Since it is more complex than a button with its two states. The label helps but I can see benefits in describing/adding context to the state that the tooltip is in.

In our case the Switch looks like this. But it would be helpful to me, if we could explain to the user that the off state means that the mittwald nameservers are in use. Or maybe you have a better idea?

But if that's now how you would want us to use it, maybe there could be a note in the docs that this component only works with buttons.

[Lisa18289]

seems to be a bug in react aria: adobe/react-spectrum#7768