From 19579f69da955b33b5c24efa484545fc3b0da964 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 4 Jun 2026 14:17:13 -0400
Subject: [PATCH 1/2] [docs] update Tooltip "disabled elements" section

---
 .../components/tooltips/DisabledTooltips.js   |  4 +---
 .../components/tooltips/DisabledTooltips.tsx  |  4 +---
 .../tooltips/DisabledTooltips.tsx.preview     |  4 +---
 .../material/components/tooltips/tooltips.md  | 20 ++++---------------
 4 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/docs/data/material/components/tooltips/DisabledTooltips.js b/docs/data/material/components/tooltips/DisabledTooltips.js
index a00764ef2a437e..079f64a57776e4 100644
--- a/docs/data/material/components/tooltips/DisabledTooltips.js
+++ b/docs/data/material/components/tooltips/DisabledTooltips.js
@@ -4,9 +4,7 @@ import Tooltip from '@mui/material/Tooltip';
 export default function DisabledTooltips() {
   return (
     <Tooltip describeChild title="You don't have permission to do this">
-      <span>
-        <Button disabled>A Disabled Button</Button>
-      </span>
+      <Button disabled style={{ pointerEvents: 'auto' }}>A Disabled Button</Button>
     </Tooltip>
   );
 }
diff --git a/docs/data/material/components/tooltips/DisabledTooltips.tsx b/docs/data/material/components/tooltips/DisabledTooltips.tsx
index a00764ef2a437e..079f64a57776e4 100644
--- a/docs/data/material/components/tooltips/DisabledTooltips.tsx
+++ b/docs/data/material/components/tooltips/DisabledTooltips.tsx
@@ -4,9 +4,7 @@ import Tooltip from '@mui/material/Tooltip';
 export default function DisabledTooltips() {
   return (
     <Tooltip describeChild title="You don't have permission to do this">
-      <span>
-        <Button disabled>A Disabled Button</Button>
-      </span>
+      <Button disabled style={{ pointerEvents: 'auto' }}>A Disabled Button</Button>
     </Tooltip>
   );
 }
diff --git a/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview b/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview
index f83193be661f3d..dc8734eda15347 100644
--- a/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview
+++ b/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview
@@ -1,5 +1,3 @@
 <Tooltip describeChild title="You don't have permission to do this">
-  <span>
-    <Button disabled>A Disabled Button</Button>
-  </span>
+  <Button disabled style={{ pointerEvents: 'auto' }}>A Disabled Button</Button>
 </Tooltip>
\ No newline at end of file
diff --git a/docs/data/material/components/tooltips/tooltips.md b/docs/data/material/components/tooltips/tooltips.md
index 42dc76cfee6928..1f20a6f1515cc6 100644
--- a/docs/data/material/components/tooltips/tooltips.md
+++ b/docs/data/material/components/tooltips/tooltips.md
@@ -147,27 +147,15 @@ You can disable this behavior (thus failing the success criterion which is requi
 
 ## Disabled elements
 
-By default disabled elements like `<button>` do not trigger user interactions so a `Tooltip` will not activate on normal events like hover. To accommodate disabled elements, add a simple wrapper element, such as a `span`.
-
-:::warning
-In order to work with Safari, you need at least one display block or flex item below the tooltip wrapper.
-:::
+When wrapping a Material UI component that inherits from `ButtonBase`, you should add the CSS property _pointer-events: auto;_ to your element when disabled:
 
 {{"demo": "DisabledTooltips.js"}}
 
 :::warning
-If you're not wrapping a Material UI component that inherits from `ButtonBase`, for instance, a native `<button>` element, you should also add the CSS property _pointer-events: none;_ to your element when disabled:
-:::
 
-```jsx
-<Tooltip describeChild title="You don't have permission to do this">
-  <span>
-    <button disabled={disabled} style={disabled ? { pointerEvents: 'none' } : {}}>
-      A disabled button
-    </button>
-  </span>
-</Tooltip>
-```
+By default, disabled elements like `<button>` are not keyboard focusable, so a `Tooltip` will only work for mouse users.
+
+:::
 
 ## Transitions
 

From 341f0f99956eb2360173b4503e7b1f5fabada404 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 4 Jun 2026 14:32:57 -0400
Subject: [PATCH 2/2] update formatting

---
 docs/data/material/components/tooltips/DisabledTooltips.js    | 4 +++-
 docs/data/material/components/tooltips/DisabledTooltips.tsx   | 4 +++-
 .../material/components/tooltips/DisabledTooltips.tsx.preview | 4 +++-
 docs/data/material/components/tooltips/tooltips.md            | 2 --
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs/data/material/components/tooltips/DisabledTooltips.js b/docs/data/material/components/tooltips/DisabledTooltips.js
index 079f64a57776e4..d4d6edf6c6fae4 100644
--- a/docs/data/material/components/tooltips/DisabledTooltips.js
+++ b/docs/data/material/components/tooltips/DisabledTooltips.js
@@ -4,7 +4,9 @@ import Tooltip from '@mui/material/Tooltip';
 export default function DisabledTooltips() {
   return (
     <Tooltip describeChild title="You don't have permission to do this">
-      <Button disabled style={{ pointerEvents: 'auto' }}>A Disabled Button</Button>
+      <Button disabled style={{ pointerEvents: 'auto' }}>
+        A Disabled Button
+      </Button>
     </Tooltip>
   );
 }
diff --git a/docs/data/material/components/tooltips/DisabledTooltips.tsx b/docs/data/material/components/tooltips/DisabledTooltips.tsx
index 079f64a57776e4..d4d6edf6c6fae4 100644
--- a/docs/data/material/components/tooltips/DisabledTooltips.tsx
+++ b/docs/data/material/components/tooltips/DisabledTooltips.tsx
@@ -4,7 +4,9 @@ import Tooltip from '@mui/material/Tooltip';
 export default function DisabledTooltips() {
   return (
     <Tooltip describeChild title="You don't have permission to do this">
-      <Button disabled style={{ pointerEvents: 'auto' }}>A Disabled Button</Button>
+      <Button disabled style={{ pointerEvents: 'auto' }}>
+        A Disabled Button
+      </Button>
     </Tooltip>
   );
 }
diff --git a/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview b/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview
index dc8734eda15347..9253da1e600e21 100644
--- a/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview
+++ b/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview
@@ -1,3 +1,5 @@
 <Tooltip describeChild title="You don't have permission to do this">
-  <Button disabled style={{ pointerEvents: 'auto' }}>A Disabled Button</Button>
+  <Button disabled style={{ pointerEvents: 'auto' }}>
+    A Disabled Button
+  </Button>
 </Tooltip>
\ No newline at end of file
diff --git a/docs/data/material/components/tooltips/tooltips.md b/docs/data/material/components/tooltips/tooltips.md
index 1f20a6f1515cc6..f07d3a1611b1ee 100644
--- a/docs/data/material/components/tooltips/tooltips.md
+++ b/docs/data/material/components/tooltips/tooltips.md
@@ -152,9 +152,7 @@ When wrapping a Material UI component that inherits from `ButtonBase`, you shou
 {{"demo": "DisabledTooltips.js"}}
 
 :::warning
-
 By default, disabled elements like `<button>` are not keyboard focusable, so a `Tooltip` will only work for mouse users.
-
 :::
 
 ## Transitions