[Bug]: The position of the Tooltip arrow is not correct

[zjhch123]

trafficstars

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (20) x64 Intel(R) Core(TM) i9-10900X CPU @ 3.70GHz
    Memory: 5.24 GB / 31.72 GB
  Browsers:
    Edge: Spartan (44.22621.1105.0), Chromium (109.0.1518.70)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/peaceful-ride-644bwi?file=/example.tsx

Bug Description

Actual Behavior

We have such a layout and have some Tooltip render inside the blocks.

When the user hovers over the button, the Tooltip position sometimes is not correct. The arrow is pointing wrong.

I think the issue should be related to CSS. I know the layout is weird and it could be implemented with better CSS, but the position of the Tooltip component should be able to work with all kinds of CSS, right?

It's a little flaky, sometimes the position is correct but sometimes is not.

Expected Behavior

The Tooltip position should be correct and the arrow should point correct element.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[layershifter]

It's a little flaky, sometimes the position is correct but sometimes is not.

I was able to reproduce the issue: positioning is broken randomly, but it reproduces frequently.

[samavati]

https://codesandbox.io/s/peaceful-ride-644bwi?file=/example.tsx

@layershifter Could you please provide steps to reproduce here? I couldn't reproduce it on my local machine

[layershifter]

@samavati looks that it happens on initial render of a tooltip: so open CodeSandbox, hover a button, it repros like on my screenshot.

[samavati]

@samavati looks that it happens on initial render of a tooltip: so open CodeSandbox, hover a button, it repros like on my screenshot.

@layershifter somehow magically it's working totally fine for me. so, I will leave it to others.

[layershifter]

The bug is tricky as it's related to the layout of that page.

• When we compute position a tooltip appear on a bottom of a page
• That state creates an additional scrollbar
• We have a hack that should prevent this: https://github.com/microsoft/fluentui/blob/1539311d63dfa731f1bbf1e08ab002a43c52f9a0/packages/react-components/react-positioning/src/createPositionManager.ts#L53-L55
• However, it does not work properly as a position gets restored before computations https://github.com/microsoft/fluentui/blob/1539311d63dfa731f1bbf1e08ab002a43c52f9a0/packages/react-components/react-positioning/src/createPositionManager.ts#L77-L78
• It's visible in element's styles:

Ideally, we should reset the hack once Floating UI calls getComputedStyle(), but currently it's unclear when to do that. I will follow up on this in a week.

[msft-fluent-ui-bot]

:tada:This issue was addressed in #28109, which has now been successfully released as @fluentui/[email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

:tada:This issue was addressed in #28109, which has now been successfully released as @fluentui/[email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

:tada:This issue was addressed in #28109, which has now been successfully released as @fluentui/[email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release