Tooltip affecting height/width of components

[MartynasStrazdas]

Describe the bug

Tooltip with stratakit theme affects height/width of components causing scrollbar to appear.

Steps to reproduce

1. Place a fixed-width container on the page.
2. Inside it, put a flex row with an icon button wrapped in a tooltip aligned to the right edge.
3. Hover the button.
4. Tooltip renders outside the container bounds and a horizontal scrollbar appears on the page.

Example using stratakit/mui:
https://stackblitz.com/edit/github-dhgkgb5d?file=src%2FApp.tsx

Expected behaviour without stratakit/mui:
https://stackblitz.com/edit/github-dhgkgb5d-f2tpdtrz?file=package.json,src%2FApp.tsx

Expected behavior

Tooltip does not expand parent components.

Link to minimal reproduction

https://stackblitz.com/edit/github-dhgkgb5d?file=src%2FApp.tsx

Environment and versions

No response

Additional context

No response

[angrycat9000]

Thanks for letting us know about this @MartynasStrazdas .

I see the issue in and can confirm it has something to do with the CSS for .MuiTooltip-tooltip::before that StrataKit is adding.

[angrycat9000]

@FlyersPh9 I see you added .MuiTooltip-tooltip::before in #1397. It appear to work fine without the ::before pseudo element. Do you recall why that was added?

[FlyersPh9]

@angrycat9000 Yes, the ::before was added to bridge the gap between the Tooltip and the trigger element. This means if you hover over the trigger, then move your cursor into the gap, the Tooltip won't disappear.

stratakit/packages/mui/src/~components/MuiTooltip.css

Lines 33 to 38 in 00ebe30

	&::before {
	content: "";
	position: absolute;
	inset: calc(var(--✨margin) * -1);
	z-index: -1;
	}

Added a semi-transparent red background color in the screenshot below to show:

[mayank99]

Related conversation which goes into more detail: #1397 (comment)

[FlyersPh9]

I'm having issues getting the StackBlitz to load, but after reading the issue description I am wondering if changing the inset to only apply on the side of the gap will help? My theory is with the inset going out in all 4 directions it is introducing the scrollbar.

.MuiTooltip-tooltip {
	…

	&:where(.MuiTooltip-tooltipPlacementBottom)::before {
		inset-block-start: calc(var(--✨margin) * -1);
	}

	&:where(.MuiTooltip-tooltipPlacementTop)::before {
		inset-block-end: calc(var(--✨margin) * -1);
	}

	&:where(.MuiTooltip-tooltipPlacementRight)::before {
		inset-inline-start: calc(var(--✨margin) * -1);
	}

	&:where(.MuiTooltip-tooltipPlacementLeft)::before {
		inset-inline-end: calc(var(--✨margin) * -1);
	}
}

[mayank99]

See #1397 (comment) for why those placement selectors are not reliable.

[mayank99]

MUI uses the deprecated popperjs library to position tooltips. This library supports a padding option on the flip modifier. I believe setting this to 4 should solve the scrollbar issue, in theory.

Passing modifiers through Tooltip's slotProps.popper is possible, but the remaining problem is that MUI already uses the flip modifier and does not allow passing options into it. Edit: Popper merges the options, as discovered in #1651 (comment).

[arome]

I dont know if the issue im facing is related to that, but the MUI tooltip is messing with the overflow on the app when close to the edge and is causing some scrollbars to appear, we werent getting these issues when using the strata tooltips.

[angrycat9000]

I dont know if the issue im facing is related to that, but the MUI tooltip is messing with the overflow on the app when close to the edge and is causing some scrollbars to appear, we werent getting these issues when using the strata tooltips.

@arome you should be able to check if this is the same cause by setting the following slotProps on the Tooltip element to see if that fixes it.

<Tooltip slotProps={{
	popper: {
		modifiers: [
			{
				name: "offset",
				options: {
					offset: [0, 2],
				},
			},
			{
				name: "flip",
				options: {
					padding: 2,
				}, 
			},
			{
				name: "preventOverflow",
				options: {
					padding: 2, 
				},
			},
		],
	}}
/>

[arome]

yes adding this slotProps fixed the issue, problem is I was using label on the IconButton so had to remove it from there and wrap it with the Tooltip component

[mayank99]

If you're manually using the Tooltip for labelling purposes, make sure to set describeChild={false} as shown in StrataKit docs.

This is what the IconButton does internally:

stratakit/packages/mui/src/~components/MuiIconButton.tsx

Line 25 in 1ae9305

<Tooltip title={label} describeChild={false} placement={labelPlacement}>