Tooltip trigger is a sibling of the focusable element – recommended pattern?

[manisha18basra]

Hi team 👋

We’re currently using useTooltipTrigger and useTooltipTriggerState from React Aria.

We have a UI scenario where the focusable element is different from the element that visually triggers or anchors the tooltip. For example, imagine a hidden input (that receives focus) and a separate label or node next to it that should display the tooltip.

For example:

• The input receives focus (or is keyboard-focused).
• A separate sibling element (like a label or a span) is where the tooltip should appear.

We’d like to know whether this is the recommended approach for such a pattern, or if there’s a more idiomatic way in React Aria to handle a focusable element and a separate tooltip trigger/anchor.

Note: We handle accessibility labels separately (not relying on the tooltip for accessibility).

Current Implementation

Component Structure

const Sample = () => {
  const triggerRef = useRef(null);

  // Context from Input component
  const inputCtx = useInputContext(); 
  // provides: isFocusVisible

  const tooltipState = useTooltipTriggerState({
    delay: 0,
    closeDelay: 100,
  });

  const { triggerProps, tooltipProps } = useTooltipTrigger(
    { isDisabled },
    tooltipState,
    triggerRef
  );

  // Manually control tooltip based on input focus state
  useEffect(() => {
    if (inputCtx?.isFocusVisible) {
      tooltipState.open(true);
    } else {
      tooltipState.close(true);
    }
  }, [inputCtx?.isFocusVisible]);

  return (
    <>
      <InputComponent />

      {/* Tooltip anchor (sibling of input) */}
      <span ref={triggerRef} {...triggerProps}>
        {children}
      </span>

      <VisuallyHidden>{accessibleText}</VisuallyHidden>

      <Tooltip
        triggerRef={triggerRef}
        tooltipState={tooltipState}
        triggerTooltipProps={tooltipProps}
      >
        {accessibleText}
      </Tooltip>
    </>
  );
};

Focus Tracking in Input Component

const { isFocusVisible, focusProps } = useFocusRing();

const inputContextValue = useMemo(
  () => ({
    isFocusVisible,
  }),
  [isFocusVisible]
);

return (
  <input {...focusProps} />
);

Questions

1. Is manually calling tooltipState.open() and tooltipState.close() the recommended approach for this scenario, or is there a better pattern?
2. Is there a supported way to decouple:
   • The focusable trigger
   • And the tooltip triggering element?
3. Are we bypassing any important internal behavior by opening/closing the tooltip this way?

We’d really appreciate guidance on the intended pattern for this use case.

Thanks! 🙏

---

Environment:

"@react-aria/tooltip": "3.9.0"
"@react-stately/tooltip": "3.5.9"
"react": "^19.2.0"

[snowystinger]

There's a few things to consider here. As you noted, a way to decouple focus from hover behaviour. The other, the tooltip applies accessible text to the trigger.

react-spectrum/packages/@react-aria/tooltip/src/useTooltipTrigger.ts

Line 144 in eef7319

'aria-describedby': state.isOpen ? tooltipId : undefined,

This should be fine as Assistive Techologies and keyboard navigation would be on the hidden real trigger.

Calling open/close yourself is fine, it's advanced, but it sounds like you're taking all the precautions, and since you're calling the stately methods, you'll still get the delay/warmup behaviour.
Here's an example with RAC https://stackblitz.com/edit/dbwnyxsh?file=src%2FCheckbox.tsx,src%2FExample.tsx,src%2FTooltip.tsx