search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.21k stars 1.07k forks source link

Tooltip.isOpen: position not adjusted to the component within the TooltipTrigger #6505

Open unional opened 1 month ago

unional commented 1 month ago

Provide a general summary of the issue here

When using the isOpen props directly, the Tooltip does not position correctly.

<TooltipTrigger>
  <Butto>Top End</Button>
  <Tooltip isOpen placement="top end">
    top end tooltip
  </Tooltip>
</TooltipTrigger>

I try to use this isOpen property to make multiple tooltip to show for taking a snapshot in storybook.

In the example below, I add isOpen to both top start and top end.

🤔 Expected Behavior?

image

(it renders correctly after I hover over them)

😯 Current Behavior

image

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

tbd

Version

react-aria-components 1.1.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

Palo Alto Networks

🕷 Tracking Issue

No response

unional commented 1 month ago

btw this is how it looks like when I add isOpen to everyone in there:

image

After "kicking" them back in place:

image
unional commented 1 month ago

Also, the position of the tooltip does not update if I use isOpen and resize the window.

snowystinger commented 1 month ago

Looks like it's working to me https://github.com/adobe/react-spectrum/blob/6e57855257f54738418f98c37efae798bf9fb4ad/packages/react-aria-components/stories/Tooltip.stories.tsx#L116

Which can be seen here https://reactspectrum.blob.core.windows.net/reactspectrum/6e57855257f54738418f98c37efae798bf9fb4ad/storybook/index.html?path=/story/react-aria-components--tooltip-arrow-boundary-offset-example&providerSwitcher-express=false on the latest build from main

Resizing window seems to work fine as well.

Can you provide a reproduction in a codesandbox/stackblitz/equivalent?

unional commented 3 weeks ago

Hi, I updated to 1.2.1 and still observe the same issue. Will try to create a repro.

unional commented 3 weeks ago

I can see the difference. In your example, you are setting isOpen on the TooltipTrigger. In my example, I'm setting isOpen on the Tooltip.

It is working on TooltipTrigger, but not on Tooltip

snowystinger commented 3 weeks ago

That looks more like a bug that TooltipProps is extending from OverlayTriggerProps. You should be controlling it from TooltipTrigger