Tooltip is not triggered on any element except Button

[nicmosc]

Provide a general summary of the issue here

When using the following pattern for tooltip:

<TooltipTrigger>
  <Button>Button with tooltip</Button>
  <Tooltip>
    ... content ...
  </Tooltip>
</TooltipTrigger>
<TooltipTrigger>
  <Text>Text with tooltip</Text>
  <Tooltip>
    ... content ...
  </Tooltip>
</TooltipTrigger>

The tooltip is not shown on the second case. Not sure why this could be since the ref is passed to a provider that wraps the children.

Screen.Recording.2023-11-16.at.11.09.38.mov

🤔 Expected Behavior?

The tooltip should show on any element within TooltipTrigger

😯 Current Behavior

The tooltip does not show

💁 Possible Solution

No response

🔦 Context

We need to show a tooltip on elements other than Button e.g. divs and having the tooltip not show is a problem

🖥️ Steps to Reproduce

https://codesandbox.io/s/blazing-cache-ql33cx?file=/src/App.js

Version

"react-aria": "^3.30.0", "react-aria-components": "^1.0.0-rc.0"

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[devongovett]

Tooltips are required to be on a focusable element for accessibility, so buttons, links, etc should all work, but text won't. This is so keyboard users can also access the tooltip.

[snowystinger]

More information here https://github.com/adobe/react-spectrum/wiki/Frequently-Asked-Questions-(FAQs)#why-cant-i-put-a-tooltip-around-any-element
There's a Spectrum suggestion for a more accessible pattern, ContextualHelp, which you could implement.

[Antrikshy]

Is there any workaround? Setting tabIndex on the text element doesn't do it either, even though it's focusable.

I just want to display text with a dashed underline, and a cursor: help, with help text in a tooltip. React Aria's solution is just too limited, and I'll have to pull in yet another library for tooltip use cases I guess...