Support informational tooltips on non-interactive elements

[VincentCordobes]

Hi! I'm trying to show an informational tooltip on hover for a non-interactive element. It seems this isn't currently possible, so I ended up wrapping the element in a <Focusable> (although I don't actually want it to be focusable)

<TooltipTrigger>
  <Focusable>
    <div>{cursorColumn}</div>
  </Focusable>
  <Tooltip>Cursor column: {cursorColumn}</Tooltip>
</TooltipTrigger>

This results in the warning: <Focusable> child must have an interactive ARIA role.

Is there a recommended way to display informational tooltips on non-interactive elements with React Aria?
If not, would the team consider supporting this use case?

Thanks!

[reidbarber]

Putting tooltips on non-interactive elements is intentionally not supported due to not being accessible. For React Spectrum, we use the ContextualHelp component to add context as to why something is disabled:

https://react-spectrum.adobe.com/react-spectrum/Tooltip.html#usage-on-disabled-or-non-interactive-elements

[VincentCordobes]

Thank you for the answer!

ContextualHelp doesn't quite fit in my case. I'm trying to show a tooltip for a read-only value (e.g. the current cursor column in a text editor) it's not disabled, just not interactive.
Kind of like the native title attribute, but stylable and consistent with other tooltip.

[reidbarber]

Yeah, this isn't something we support since it won't be accessible to keyboard, touch, or screen reader users, so I would recommend Focusable for this use case.