Tooltip gets stuck randomly

[RexusWolf]

Provide a general summary of the issue here

Whenever using multiple instances of Tooltip, there are some times where one of them gets stuck on screen, and only reloading seems to make it dissapear.

🤔 Expected Behavior?

Tooltip always dissapears when not hovering.

😯 Current Behavior

Tooltip gets stuck sometimes.

💁 Possible Solution

No response

🔦 Context

I'm using a custom TooltipFocusable component to be able to use Tooltip with any component. This is how it looks:

import { FocusableOptions, useFocusable } from '@react-aria/focus';
import { forwardRef, HTMLAttributes, RefObject, useRef } from 'react';

export const TooltipFocusable = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>((props, ref) => {
  const backupRef = useRef<HTMLSpanElement>(null);
  const determinedRef = (ref ?? backupRef) as RefObject<HTMLSpanElement>;
  const { focusableProps } = useFocusable(props as FocusableOptions, determinedRef);

  return (
    <span
      style={{ display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'center' }}
      ref={determinedRef}
      {...focusableProps}
      {...props}
    />
  );
});

🖥️ Steps to Reproduce

I couldn't find an easy way to reproduce it, as it happens randomly.

1. Add multiple Tooltips to a screen.
2. Hover over the tooltips trying to get one stuck.

Version

react-aria-components 1.4.1

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I'm unable to see it happening on our docs, are you able to reproduce it there?
Maybe a video/screen recording would help us recognize something different.

Otherwise, I'll need you to do some debugging in https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/tooltip/src/useTooltipTrigger.ts since I cannot see it.

Does it work if you use a button instead of a span?