react-aria tooltip placement

[rolanday]

Hello, I'm implementing tooltip using example https://react-spectrum.adobe.com/react-aria/useTooltipTrigger.html as basis. Seeking guidance on how to place the tooltip, and was expecting to have placement and arrow props similar to usePopover, but appears not to be the case. Any advice much appreciated. Thanks!

[rolanday]

Any advice here? I feel I'm missing a piece of the puzzle as useTooltipTrigger samples functionally work but are not usable for real app if props not available for placing the tooltip overlay and arrow (as with usePopover). The RAC components work nicely, but it's the hooks-based approach that drove me to use react-aria.

[LFDanLu]

You'll have to call useOverlayPosition yourself similarly to how we do it here for RAC tooltip. I don't quite recall why we didn't call useOverlayPosition in the useTooltip hook itself, will have to dig for any design decisions made there.

I'd still encourage that you give the RAC Tooltip a try over the hook based approach if at all possible, and only drop down to the hooks if you find something RAC Tooltip doesn't cover.

[rolanday]

Thanks Daniel. Super appreciate the response. I'll give this a try -- I looked at this code prev but wanted to be sure on the right track because seems like something sample should have covered for how basic the need, so this helps a lot.

Re: RAC, I'm hesitant because alpha and not sure how well can drop back to hooks from RAC. For example, I used a hooks button for a RAC Tooltip trigger, but doesn't trigger. Perhaps just a case of documentation, but leaves me w/ the impression it hooks or RAC if wanting to combine/compose.

[LFDanLu]

Strange that the hooks button didn't work with the RAC TooltipTrigger, it should be able to access the FocusableProvider that the trigger sets up. Are you able to reproduce in this sandbox: https://codesandbox.io/s/loving-glade-qr536f?file=/src/App.js? Definitely let us know if you run into other RAC + hooks problems, that is a use case we definitely want to support and feedback like yours helps us know if we've missed anything before we bump RAC up through pre-release stages!

[rolanday]

This is encouraging (Works :-)) I'll take a closer look later this afternoon when I free up and to see why not working for me and report back w/ repro if needed. Thanks so much for taking the time! "-)

[rolanday]

Hi @LFDanLu , I found the problem -- I was starting from the useTooltipTrigger sample and had triggerProps in my button (see below). I didn't dig deeper to understand why, but I assume aria attribute collision happening. Odd, because I'm certain I previously ruled this out by removing tooltip trigger props since stands to reason there'd be a conflict of sorts, but 🤷. Anyway, thank you a ton for taking the time because you've got me back on track, and sounds like your team is committed to RAC. Since RAC doesn't affect bundle size much as is a thin wrapper over react-aria, I'll take your advice and start w/ RAC and reserve hooks-only for where needed -- button is one such place I prefer to use hooks, but RAC should suffice in most other places.

I'll go ahead and close this out. Thanks again! :-)

// triggers RAC tooltip 👍 
export function HooksButton(props: AriaButtonProps) {
  let ref = React.useRef<HTMLButtonElement>(null);
  let { buttonProps } = useButton(props, ref);
  let { children } = props;

  return (
    <button {...buttonProps} ref={ref}>
      {children}
    </button>
  );
}

// doesn't trigger RAC tooltip 👎 
export function HooksButton(props: AriaButtonProps) {
  let ref = React.useRef<HTMLButtonElement>(null);
  let { buttonProps } = useButton(props, ref);
  let { children } = props;

  let state = useTooltipTriggerState(props);
  let { triggerProps } = useTooltipTrigger(props, state, ref);

  return (
    <button {...buttonProps} {...triggerProps} ref={ref}>
      {children}
    </button>
  );
}