fix: Incorrect placement in [`Tooltip`]

[xperiandri]

🐛 Bug Report

If you attach a Tooltip at the item at the very right of the page it renders at the incorrect place.

See the screen recording https://github.com/microsoft/fluentui-blazor/assets/2365592/173048cc-dc18-4d12-9cdc-a937c3e87d10

💻 Repro or Code Sample

Just attach a tooltip to the item at the very top right of the page.

🤔 Expected Behavior

Tooltip renders below the item with some shift to fit the screen. The tooltip arrow points straight to the item center.

😯 Current Behavior

Tooltip renders somewhere else. The tooltip arrow points into some strange direction

🔦 Context

See the screen recording

🌍 Your Environment

• .NET 8 and FAST 4.2.1

[vnbaaij]

Andrii (@xperiandri) Are you using the FluentTooltipProvider?

[xperiandri]

Yes, I do. This is my layout ending

    <FluentToastProvider />
    <FluentDialogProvider />
    <FluentTooltipProvider />
</FluentLayout>

[vnbaaij]

There is an issue with the underlying fluent-tooltip web component. This is what I get with a simple test with just the wc: (gray area is the scrollbar at the right of the screen. Tooltip partially disappears and is not moved left).

~Will raise it~ in the fluentui web components repo. https://github.com/microsoft/fluentui/issues/30247

[vnbaaij]

As a workaround, I would suggest to set the tooltip position to Position.Left for now. The TooltipProvider will make sute it is displayed on top of all other components. My guess is it will take a while to get this fixed on the web components side...

[vnbaaij]

Closing this, as it is not going to be solved in the current version of the web components, The team is fully solving this for the next version and it will flow into here when ready. We have a workaround for now.