How to make react-spectrum <TooltipTrigger> work with pure html components?

[tuananhlai]

Hi, I have a small question regarding react-spectrum's <TooltipTrigger> component. While it works as intended for other react-spectrum components, I couldn't get it to work with pure HTML components like <button>. Is it possible to do so and how should I go about implementing it?

I have checked the code and it seems like <TooltipTrigger> is using <FocusableProvider> to decide when to show or hide the tooltip, so it doesn't work with HTML components since they do not call useFocusable internally.

Thank you for your assistance!

[snowystinger]

You can make any button work with TooltipTrigger if you use the hook for buttons https://react-spectrum.adobe.com/react-aria/useButton.html. You could also use the React Aria Component, https://react-spectrum.adobe.com/react-aria/Button.html which gives you full control over the rendering and takes care of calling the useButton hook for you.

[tuananhlai]

Thank you for the answer 🙏 . I want to confirm one thing.

Currently, there's no way to use pure HTML components as a tooltip trigger. Only react-spectrum's component, react-aria-components or custom components created with react-aria's hooks can be used as tooltip triggers. Is it correct? 🤔

<TooltipTrigger>
    {/* this will not work */}
    <button>Show tooltip</button>
    <Tooltip>
      Example tooltip content.
    </Tooltip>
  </TooltipTrigger>

[snowystinger]

Correct, we account for many different browser/assistive technology/device behaviors. Buttons are hard, you can read about our findings here: https://react-spectrum.adobe.com/blog/building-a-button-part-1.html, and tooltips are even harder. As a result, our tooltips only work with buttons and certain other elements that are normalized by our hooks.

[tuananhlai]

If you don't mind, could you briefly explain about the reasoning behind react-spectrum's decision to restrict the range of components that can serve as tooltip triggers, while other component libraries such as AntD and Chakra UI allow the use of any valid HTML elements for this purpose?

[snowystinger]

I'd start with our docs https://react-spectrum.adobe.com/react-aria/useTooltipTrigger.html#features

And then you're asking more specifically about focusable HTML elements such as inputs? It can be difficult to expose a tooltip to assistive technologies in cases like textfields.

We very much discourage using tooltips at all. Especially when communicating critical information, such as error messages or field requirements, etc. Instead, we advocate using inline messaging and popovers using HelpText and ContextualHelp. https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text and https://react-spectrum.adobe.com/react-spectrum/TextField.html#contextual-help

You might search our issues and discussions for more information as well. We've had several discussions about this topic.