Tooltip position not working correctly with RTL

[ShahriarKh]

What package has an issue

@mantine/core

Describe the bug

The position of tooltip is incorrect in RTL mode. For example, choosing "Right" in RTL renders the tooltip on the left side.

LTR (correct)

RTL (incorrect)

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

5.1.5

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

No response

Do you know how to fix the issue

No

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

Yes

Possible fix

I need to take a look at the source code.

[ShahriarKh]

Just took a quick look at source code. I think this line is causing the problem (since it's using theme.dir):

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

Lines 110 to 111 in 73c0e3a

	const tooltip = useTooltip({
	position: getFloatingPosition(theme.dir, position),

And this is the getFloatingPosition that swaps right and left based on theme direction!

mantine/src/mantine-core/src/Floating/get-floating-position/get-floating-position.ts

Lines 1 to 14 in 73c0e3a

	import type { FloatingPosition, FloatingSide, FloatingPlacement } from '../types';
	export function getFloatingPosition(
	dir: 'rtl' | 'ltr',
	position: FloatingPosition
	): FloatingPosition {
	if (dir === 'rtl' && (position.includes('right') || position.includes('left'))) {
	const [side, placement] = position.split('-') as [FloatingSide, FloatingPlacement];
	const flippedPosition = side === 'right' ? 'left' : 'right';
	return placement === undefined ? flippedPosition : `${flippedPosition}-${placement}`;
	}
	return position;
	}

[ShahriarKh]

I'm taking a look at other components and will update the list of affected components below:

• Tooltip
• Menu (Arrow rotation is also incorrect)
• Drawer

I believe there should be an option (global or per component) to let develops decide if they want to swap positions based on dir or not, because when you are working on a multilingual app/website, it makes sense to swap positions based on the direction; this way, the layout and components automatically adapt to the direction, but when you are working on a RTL-only app/website, it makes the maintenance hard because of inverted positions.

[rtivital]

Flipping position is the correct logic – if you are building website that uses both rtl and ltr, you would want those positions flipped. The prop on theme to configure this behavior will be nice though. The arrow position is not correct, it should be fixed.

[ShahriarKh]

I see... so, how can I contribute to add that prop?

[rtivital]

Yes, sure, feel free to send a PR, if you can also fix the arrow position for rtl that would be great

[ShahriarKh]

Okay, I will take a look at the code and see what I can do!

[rtivital]

Fixed in 5.1.7

[ShaMan123]

This position is not fixed, the tip is fixed