React-aria-components TooltipTrigger with custom button

[hrigner]

Hey!
I would love to use the react-aria-components Tooltip to build a custom Tooltip component. However, I can't get it to work with a custom button element (or native html button). It works just fine when I use react-aria-components Button in the TooltipTrigger. Do I have to use any hook on the trigger element? It's a Tooltip component that can be used with basically any element as trigger..

Thanks! ☺️

[LFDanLu]

The RAC (react-aria-components) TooltipTrigger sends the focus/press props that the trigger needs via a context setup by FocusableProvider +

react-spectrum/packages/@react-aria/focus/src/useFocusable.tsx

Line 55 in f65c181

<FocusableContext.Provider value={context}>

. Our RAC Button's call of useButton accesses this context via a useFocusable call so if you were to use your own custom button element you'd have to call useButton as well. For non-button elements you'd call useFocusable and usePress.

I'd be careful when accepting any element as a trigger since you'll want to make sure its an element that supports focus/press interactions. Is there a particular reason you can't use our RAC Button for your usecase?

[hrigner]

Thanks for the answer! If I call useButton in our Button component, and useFocusable in some other non-button component, the tooltip shows on e.g. hover. However, the data-placement prop is not applied. Do you have any idea why?

We already have a button component implemented in our component library. We could for sure replace it with the RAC Button, but we still have lots of other focusable components that need the ability to be wrapped in a Tooltip.

[hrigner]

Actually, the data-placement is applied when I create a wrapper component around the trigger element, and call useFocusable for the wrapper component. All good, thank you so much for the help! ☺️