[RAC] Can't use Tooltip with Switch

[staticshock]

Provide a general summary of the issue here

Hovering over a Switch does not render Tooltip

🤔 Expected Behavior?

I was expecting this to show a tooltip when the switch is hovered:

<TooltipTrigger>
  <Switch />
  <Tooltip>
    my tooltip
  </Tooltip>
</TooltipTrigger>

😯 Current Behavior

No tooltip on hover

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/devbox/runtime-resonance-hvl4tr

Version

react-aria-components 1.5

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

This is a bit of a tricky one, TooltipTrigger relies on FocusableProvider passing down the onHover handers to the trigger element, but this ends up being the visually hidden input element of the Switch, which isn't even positioned properly even if it were to properly trigger on hover.

[estenp]

So is this just an issue with TooltipTrigger component specifically?

I.e., are there conventional alternative approaches that would enable Tooltips on Switch, or any other focusable/interactive elements, RA components or otherwise? Could I wrap in a div and use useTooltipTrigger or something?

[LFDanLu]

Custom tooltip trigger elements can be set up as described here. Typically the focusable trigger element is also the hoverable element but for Switch we'd want the tooltip focus handlers to go to the input and the hover handers to go to the visual switch indicator (div or something).

We could perhaps fix this in RAC Switch by extracting the hover handlers returned by the TooltipTrigger and forwarding them through a different context (HoverableContext?) and/or applying them to the label element itself. You could certainly do this yourself if you drop down to the hooks level like you mentioned, just a matter of extracting the hoverProps from useTooltipTrigger and applying it on the element you want.