Wrong alignment behavior with Tooltip/Popover components

[7iomka]

What package has an issue

@mantine/core

Describe the bug

I like that you choose to go with Floating UI as a base for all tooltips, dropdowns, etc...
I love Floating UI, but with mantine I don't have the same behavior.

Image you have a tooltip text with approx. maximum width 450px.
Also you support responsiveness for at least 320px.

We have different behavior than expected (as in Floating UI) in this cases:

• when width of tooltip is not enough to to fill free space between target and direction side
• when viewport is less then width of tooltip

Expected behavior
Default (when free space is enough)

When free space is not enough:

Actual behavior

• for both cases we have broken layout - content of tooltip is outside of viewport, or for multiline target it has broken alignment (especially when arrow is enabled)

LINK FOR DEMO

What version of @mantine/hooks page do you have in package.json?

latest

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No response

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

Refactor logic to prevent usage of direct width value (maxWidth is preferable), also I think you need to research edge cases

[7iomka]

Another case

2022-09-20.13.56.55.mp4

[rtivital]

Fixed in 5.5.0

[7iomka]

@rtivital For me issue still present :(

1. Open the DEMO
2. Hover once to show tooltip first time. Then, resize ui window to the minimum allowed size, then try again to hover to tooltip trigger ((i)) multiple times, you will see weird behavior like one that I have and demonstrated you in video from above. Note, that I have this issue without resizes and etc., but maybe it's a common case, and if a fix for this exists, maybe it will help me.

[rtivital]

No idea about that, maybe some issue with floating ui. Anyway, the issue was originally about arrow position and inline tooltip, the shift of tooltip is probably unrelated.

[atomiks]

Hey @rtivital I think the issue is this:

mantine/src/mantine-core/src/Tooltip/Tooltip.tsx

Lines 153 to 154 in aa3b261

	top: tooltip.y ?? '',
	left: tooltip.x ?? '',

The ?? '' should be ?? 0. By laying out the element at the top-left of the screen initially, it will have its "final" dimensions ready. Currently, it gets resized by the layout when at the right of the screen, which causes it to have smaller initial dimensions than it should.

More info:

[rtivital]

Thanks, @atomiks, I'll change that to zero. I remember taking this exact logic from one of the floating ui examples about 4 months, it must have been changed since then.

[rtivital]

I've changed empty string to 0 in 5.5.6, it will be out soon

[atomiks]

I think it should also be done for Popover:

mantine/src/mantine-core/src/Popover/PopoverDropdown/PopoverDropdown.tsx

Lines 71 to 72 in 4fa634e

	top: ctx.y ?? '',
	left: ctx.x ?? '',

Another thing I discovered is if you resize the window to be narrow after it gets positioned for the first time, it can have the wrong position for subsequent renders. (Assuming the useFloating() hook does not get unmounted between renders).

There are two fixes for that:

• Set width: max-content on the floating element. This ensures parent containers don't affect its dimensions, no matter where it is located on the document, so it can be measured properly.

OR

• Use transform: translate() for the coordinates, and keep top/left to 0 at all times. The layout will not be affected in this case either, and its dimensions will be full size even when it pushes up against the edge of the document.

[rtivital]

I've added the same changes as in Tooltip to Popover and set width: max-content