[tooltip] Simplify RTL styles using CSS logical properties

[sai6855]

Collapse 15 style variants down to 5 in Tooltip.js by replacing physical CSS properties (marginLeft/marginRight, left/right) with logical properties (marginInlineStart/marginInlineEnd, insetInlineStart/insetInlineEnd), letting the browser handle RTL flipping natively.

Goal of this PR is simplify css and reduce bundle size

Why this is better

1. RTL handling moves from JS to the browser. Previously, the component read useRtl() on every render, stored isRtl on
ownerState, and every direction-sensitive style had to be authored twice (once for LTR, once for RTL). Logical properties flip
automatically based on dir/direction, so one rule covers both.

2. Fewer style variants → simpler styling pipeline.

• TooltipPopper: 7 variants → 2 (the !open variant was also redundant; merged into the !disableInteractive condition)
• TooltipTooltip: 8 variants → 3 (the two touch top/bottom variants also merged)
• Net ~90 lines removed from the styled blocks.

3. Less state to thread through the component. isRtl is gone from ownerState, and the useRtl() call + import are removed. One
fewer hook call per render, one fewer field to reason about.

4. Aligned with the rest of the codebase's direction. Other MUI components (Popper, Drawer internals) already use logical properties
where applicable. This brings Tooltip in line.

I visually don't see any difference in https://deploy-preview-48351--material-ui.netlify.app/material-ui/react-tooltip/ and in https://mui.com/material-ui/react-tooltip/ in rtl version

This PR	master branch

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	▼-1.11KB(-0.22%)	▼-99B(-0.07%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/private-theming	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Deploy preview

https://deploy-preview-48351--material-ui.netlify.app/

---

Check out the code infra dashboard for more information about this PR.

[Copilot]

Pull request overview

This PR simplifies Tooltip RTL-specific styling by replacing left/right physical CSS properties with CSS logical properties, removing the need to thread isRtl through ownerState and collapsing multiple RTL/LTR variants into fewer shared rules (aiming to reduce complexity and bundle size).

Changes:

• Removed useRtl() usage from Tooltip and eliminated isRtl from ownerState.
• Replaced direction-dependent left/right + marginLeft/marginRight arrow/margin rules with logical properties (insetInlineStart/End, marginInlineStart/End).
• Simplified style variant conditions (including a refactor of the popper pointerEvents variants).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[mj12albert]

Codex review:

Blocker: Tooltip RTL side offsets now depend on DOM dir, not MUI’s RTL context.

The new logical properties in Tooltip.js resolve from CSS/DOM direction, but this PR removes useRtl() from Tooltip. Popper still reads RTL from RtlProvider and passes direction for placement logic, but BasePopper consumes that prop and does not set DOM/CSS direction on the portaled root. In a ThemeProvider with direction: 'rtl' but no global dir="rtl", placement is RTL-aware while these arrow/margin rules stay LTR, regressing the previous ownerState.isRtl behavior.

[sai6855]

Codex review:

Blocker: Tooltip RTL side offsets now depend on DOM dir, not MUI’s RTL context.
The new logical properties in Tooltip.js resolve from CSS/DOM direction, but this PR removes useRtl() from Tooltip. Popper still reads RTL from RtlProvider and passes direction for placement logic, but BasePopper consumes that prop and does not set DOM/CSS direction on the portaled root. In a ThemeProvider with direction: 'rtl' but no global dir="rtl", placement is RTL-aware while these arrow/margin rules stay LTR, regressing the previous ownerState.isRtl behavior.

Per https://mui.com/material-ui/customization/right-to-left/#1-set-the-html-direction, consumers must set dir="rtl" on (or on a local wrapper with a configured portal container). With this being said, CSS logical properties in Tooltip resolve correctly on the portaled popper.

I verified this visually in all three configurations, LTR, , and ThemeProvider({ direction: 'rtl' }) only—and arrows correctly point at anchors in each case.

[mj12albert]

Added suggested test coverage for the changes:

Add a small RTL-focused block in Tooltip.test.js:

Global RTL case: set document.documentElement.dir = 'rtl', render <Tooltip open arrow />, and assert the tooltip/arrow computed styles land on the flipped physical side. This validates the new marginInline* / insetInline* rules.

Local RTL + portal case: render inside a dir="rtl" wrapper and pass slotProps.popper={{ container: rtlContainer }} so the portal stays inside that RTL subtree. Assert the same flipped offsets. This matches the documented portal requirement.