From 2afca7ae24c79a83a12ae2add309e0807430de3c Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 27 Aug 2020 20:03:22 +0200
Subject: [PATCH 1/5] [Tooltip] Make `interactive` default

---
 docs/pages/api-docs/tooltip.md                |  2 -
 .../tooltips/InteractiveTooltips.js           | 11 ---
 .../tooltips/InteractiveTooltips.tsx          | 11 ---
 .../src/pages/components/tooltips/tooltips.md |  6 --
 .../pages/guides/migration-v4/migration-v4.md |  5 +
 packages/material-ui/src/Tooltip/Tooltip.d.ts |  8 --
 packages/material-ui/src/Tooltip/Tooltip.js   | 25 +----
 .../material-ui/src/Tooltip/Tooltip.test.js   | 97 +++++++++----------
 8 files changed, 56 insertions(+), 109 deletions(-)
 delete mode 100644 docs/src/pages/components/tooltips/InteractiveTooltips.js
 delete mode 100644 docs/src/pages/components/tooltips/InteractiveTooltips.tsx

diff --git a/docs/pages/api-docs/tooltip.md b/docs/pages/api-docs/tooltip.md
index ba9a00737a4323..f6070609f29192 100644
--- a/docs/pages/api-docs/tooltip.md
+++ b/docs/pages/api-docs/tooltip.md
@@ -39,7 +39,6 @@ The `MuiTooltip` name can be used for providing [default props](/customization/g
 | <span class="prop-name">enterNextDelay</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | The number of milliseconds to wait before showing the tooltip when one was already recently opened. |
 | <span class="prop-name">enterTouchDelay</span> | <span class="prop-type">number</span> | <span class="prop-default">700</span> | The number of milliseconds a user must touch the element before showing the tooltip. |
 | <span class="prop-name">id</span> | <span class="prop-type">string</span> |  | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. |
-| <span class="prop-name">interactive</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Makes a tooltip interactive, i.e. will not close when the user hovers over the tooltip before the `leaveDelay` is expired. |
 | <span class="prop-name">leaveDelay</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | The number of milliseconds to wait before hiding the tooltip. This prop won't impact the leave touch delay (`leaveTouchDelay`). |
 | <span class="prop-name">leaveTouchDelay</span> | <span class="prop-type">number</span> | <span class="prop-default">1500</span> | The number of milliseconds after the user stops touching an element before hiding the tooltip. |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
@@ -61,7 +60,6 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">popper</span> | <span class="prop-name">.MuiTooltip-popper</span> | Styles applied to the Popper component.
-| <span class="prop-name">popperInteractive</span> | <span class="prop-name">.MuiTooltip-popperInteractive</span> | Styles applied to the Popper component if `interactive={true}`.
 | <span class="prop-name">popperArrow</span> | <span class="prop-name">.MuiTooltip-popperArrow</span> | Styles applied to the Popper component if `arrow={true}`.
 | <span class="prop-name">tooltip</span> | <span class="prop-name">.MuiTooltip-tooltip</span> | Styles applied to the tooltip (label wrapper) element.
 | <span class="prop-name">tooltipArrow</span> | <span class="prop-name">.MuiTooltip-tooltipArrow</span> | Styles applied to the tooltip (label wrapper) element if `arrow={true}`.
diff --git a/docs/src/pages/components/tooltips/InteractiveTooltips.js b/docs/src/pages/components/tooltips/InteractiveTooltips.js
deleted file mode 100644
index a9d37f3cb3c8cc..00000000000000
--- a/docs/src/pages/components/tooltips/InteractiveTooltips.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import Button from '@material-ui/core/Button';
-import Tooltip from '@material-ui/core/Tooltip';
-
-export default function InteractiveTooltips() {
-  return (
-    <Tooltip title="Add" interactive>
-      <Button>Interactive</Button>
-    </Tooltip>
-  );
-}
diff --git a/docs/src/pages/components/tooltips/InteractiveTooltips.tsx b/docs/src/pages/components/tooltips/InteractiveTooltips.tsx
deleted file mode 100644
index a9d37f3cb3c8cc..00000000000000
--- a/docs/src/pages/components/tooltips/InteractiveTooltips.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import Button from '@material-ui/core/Button';
-import Tooltip from '@material-ui/core/Tooltip';
-
-export default function InteractiveTooltips() {
-  return (
-    <Tooltip title="Add" interactive>
-      <Button>Interactive</Button>
-    </Tooltip>
-  );
-}
diff --git a/docs/src/pages/components/tooltips/tooltips.md b/docs/src/pages/components/tooltips/tooltips.md
index d7e7f572833b2f..5d6fa22a21b82a 100644
--- a/docs/src/pages/components/tooltips/tooltips.md
+++ b/docs/src/pages/components/tooltips/tooltips.md
@@ -76,12 +76,6 @@ The `Tooltip` wraps long text by default to make it readable.
 
 {{"demo": "pages/components/tooltips/VariableWidth.js"}}
 
-## Interactive
-
-A tooltip can be interactive. It won't close when the user hovers over the tooltip before the `leaveDelay` is expired.
-
-{{"demo": "pages/components/tooltips/InteractiveTooltips.js"}}
-
 ## 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`.
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index a4bf32965853bd..5580d910c38c99 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -775,6 +775,11 @@ const theme = createMuiTheme({
   +import ToggleButton from '@material-ui/core/ToggleButton';
   +import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
   ```
+### Tooltip
+
+- Removed the `interactive` prop.
+  The tooltip implements this behavior by default now.
+  The previous default behavior (`interactive={false}`) failed [success criterion 1.4.3 ("hoverable") in WCAG 2.1](https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus).
 
 ### Typography
 
diff --git a/packages/material-ui/src/Tooltip/Tooltip.d.ts b/packages/material-ui/src/Tooltip/Tooltip.d.ts
index 7491423f528f5e..c3e20538c1b58a 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.d.ts
+++ b/packages/material-ui/src/Tooltip/Tooltip.d.ts
@@ -19,8 +19,6 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
   classes?: {
     /** Styles applied to the Popper component. */
     popper?: string;
-    /** Styles applied to the Popper component if `interactive={true}`. */
-    popperInteractive?: string;
     /** Styles applied to the Popper component if `arrow={true}`. */
     popperArrow?: string;
     /** Styles applied to the tooltip (label wrapper) element. */
@@ -82,12 +80,6 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id?: string;
-  /**
-   * Makes a tooltip interactive, i.e. will not close when the user
-   * hovers over the tooltip before the `leaveDelay` is expired.
-   * @default false
-   */
-  interactive?: boolean;
   /**
    * The number of milliseconds to wait before hiding the tooltip.
    * This prop won't impact the leave touch delay (`leaveTouchDelay`).
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index a10b8d19f3c37d..6775d3ece96c7f 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -69,11 +69,6 @@ export const styles = (theme) => ({
   /* Styles applied to the Popper component. */
   popper: {
     zIndex: theme.zIndex.tooltip,
-    pointerEvents: 'none', // disable jss-rtl plugin
-  },
-  /* Styles applied to the Popper component if `interactive={true}`. */
-  popperInteractive: {
-    pointerEvents: 'auto',
   },
   /* Styles applied to the Popper component if `arrow={true}`. */
   popperArrow: arrowGenerator(),
@@ -174,7 +169,6 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     enterNextDelay = 0,
     enterTouchDelay = 700,
     id: idProp,
-    interactive = false,
     leaveDelay = 0,
     leaveTouchDelay = 1500,
     onClose,
@@ -486,20 +480,16 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     childrenProps.onMouseOver = handleEnter();
     childrenProps.onMouseLeave = handleLeave();
 
-    if (interactive) {
-      interactiveWrapperListeners.onMouseOver = handleEnter(false);
-      interactiveWrapperListeners.onMouseLeave = handleLeave(false);
-    }
+    interactiveWrapperListeners.onMouseOver = handleEnter(false);
+    interactiveWrapperListeners.onMouseLeave = handleLeave(false);
   }
 
   if (!disableFocusListener) {
     childrenProps.onFocus = handleFocus();
     childrenProps.onBlur = handleLeave();
 
-    if (interactive) {
-      interactiveWrapperListeners.onFocus = handleFocus(false);
-      interactiveWrapperListeners.onBlur = handleLeave(false);
-    }
+    interactiveWrapperListeners.onFocus = handleFocus(false);
+    interactiveWrapperListeners.onBlur = handleLeave(false);
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -534,7 +524,6 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
       {React.cloneElement(children, childrenProps)}
       <PopperComponent
         className={clsx(classes.popper, {
-          [classes.popperInteractive]: interactive,
           [classes.popperArrow]: arrow,
         })}
         placement={placement}
@@ -635,12 +624,6 @@ Tooltip.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: PropTypes.string,
-  /**
-   * Makes a tooltip interactive, i.e. will not close when the user
-   * hovers over the tooltip before the `leaveDelay` is expired.
-   * @default false
-   */
-  interactive: PropTypes.bool,
   /**
    * The number of milliseconds to wait before hiding the tooltip.
    * This prop won't impact the leave touch delay (`leaveTouchDelay`).
diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index a9ba0b66c06fd3..be2455c86fa4f0 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -633,7 +633,7 @@ describe('<Tooltip />', () => {
     it('should ignore event from the tooltip', () => {
       const handleMouseOver = spy();
       const { getByRole } = render(
-        <Tooltip title="Hello World" open interactive>
+        <Tooltip title="Hello World" open>
           <button type="submit" onMouseOver={handleMouseOver}>
             Hello World
           </button>
@@ -698,68 +698,65 @@ describe('<Tooltip />', () => {
     });
   });
 
-  describe('prop: interactive', () => {
-    it('should keep the overlay open if the popper element is hovered', () => {
-      const { getByRole } = render(
-        <Tooltip
-          title="Hello World"
-          enterDelay={100}
-          interactive
-          leaveDelay={111}
-          TransitionProps={{ timeout: 10 }}
-        >
-          <button id="testChild" type="submit">
-            Hello World
-          </button>
-        </Tooltip>,
-      );
+  it('should keep the overlay open if the popper element is hovered', () => {
+    const { getByRole } = render(
+      <Tooltip
+        title="Hello World"
+        enterDelay={100}
+        leaveDelay={111}
+        TransitionProps={{ timeout: 10 }}
+      >
+        <button id="testChild" type="submit">
+          Hello World
+        </button>
+      </Tooltip>,
+    );
 
-      fireEvent.mouseOver(getByRole('button'));
-      act(() => {
-        clock.tick(100);
-      });
+    fireEvent.mouseOver(getByRole('button'));
+    act(() => {
+      clock.tick(100);
+    });
 
-      expect(getByRole('tooltip')).toBeVisible();
+    expect(getByRole('tooltip')).toBeVisible();
 
-      fireEvent.mouseLeave(getByRole('button'));
+    fireEvent.mouseLeave(getByRole('button'));
 
-      expect(getByRole('tooltip')).toBeVisible();
+    expect(getByRole('tooltip')).toBeVisible();
 
-      fireEvent.mouseOver(getByRole('tooltip'));
-      clock.tick(111 + 10);
+    fireEvent.mouseOver(getByRole('tooltip'));
+    clock.tick(111 + 10);
 
-      expect(getByRole('tooltip')).toBeVisible();
-    });
+    expect(getByRole('tooltip')).toBeVisible();
+  });
 
-    it('should not animate twice', () => {
-      const { getByRole } = render(
-        <Tooltip title="Hello World" interactive enterDelay={500} TransitionProps={{ timeout: 10 }}>
-          <button id="testChild" type="submit">
-            Hello World
-          </button>
-        </Tooltip>,
-      );
+  it('should not animate twice', () => {
+    const { getByRole } = render(
+      <Tooltip title="Hello World" enterDelay={500} TransitionProps={{ timeout: 10 }}>
+        <button id="testChild" type="submit">
+          Hello World
+        </button>
+      </Tooltip>,
+    );
 
-      fireEvent.mouseOver(getByRole('button'));
-      act(() => {
-        clock.tick(500);
-      });
+    fireEvent.mouseOver(getByRole('button'));
+    act(() => {
+      clock.tick(500);
+    });
 
-      expect(getByRole('tooltip')).toBeVisible();
+    expect(getByRole('tooltip')).toBeVisible();
 
-      fireEvent.mouseLeave(getByRole('button'));
+    fireEvent.mouseLeave(getByRole('button'));
 
-      expect(getByRole('tooltip')).toBeVisible();
+    expect(getByRole('tooltip')).toBeVisible();
 
-      fireEvent.mouseOver(getByRole('tooltip'));
-      clock.tick(10);
+    fireEvent.mouseOver(getByRole('tooltip'));
+    clock.tick(10);
 
-      expect(getByRole('tooltip')).toBeVisible();
+    expect(getByRole('tooltip')).toBeVisible();
 
-      // TOD: Unclear why not running triggers microtasks but runAll does not trigger microtasks
-      // can be removed once Popper#update is sync
-      clock.runAll();
-    });
+    // TOD: Unclear why not running triggers microtasks but runAll does not trigger microtasks
+    // can be removed once Popper#update is sync
+    clock.runAll();
   });
 
   describe('prop: PopperProps', () => {
@@ -886,7 +883,7 @@ describe('<Tooltip />', () => {
         );
       });
       const { getByRole } = render(
-        <Tooltip interactive open title="test">
+        <Tooltip open title="test">
           <TextField onFocus={handleFocus} />
         </Tooltip>,
       );

From 18891dac3d79fa7721faf4d1d92bc98d71fd936d Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 28 Sep 2020 12:01:16 +0200
Subject: [PATCH 2/5] Introduce disableInteractive

---
 docs/pages/api-docs/tooltip.md                |  2 +
 .../tooltips/NonInteractiveTooltips.js        | 11 +++
 .../tooltips/NonInteractiveTooltips.tsx       | 11 +++
 .../src/pages/components/tooltips/tooltips.md |  8 ++
 .../pages/guides/migration-v4/migration-v4.md | 16 ++-
 packages/material-ui/src/Tooltip/Tooltip.d.ts |  7 ++
 packages/material-ui/src/Tooltip/Tooltip.js   | 24 ++++-
 .../material-ui/src/Tooltip/Tooltip.test.js   | 97 ++++++++++---------
 8 files changed, 122 insertions(+), 54 deletions(-)
 create mode 100644 docs/src/pages/components/tooltips/NonInteractiveTooltips.js
 create mode 100644 docs/src/pages/components/tooltips/NonInteractiveTooltips.tsx

diff --git a/docs/pages/api-docs/tooltip.md b/docs/pages/api-docs/tooltip.md
index f6070609f29192..61bf6d6989b389 100644
--- a/docs/pages/api-docs/tooltip.md
+++ b/docs/pages/api-docs/tooltip.md
@@ -34,6 +34,7 @@ The `MuiTooltip` name can be used for providing [default props](/customization/g
 | <span class="prop-name">describeChild</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Set to `true` if the `title` acts as an accessible description. By default the `title` acts as an accessible label for the child. |
 | <span class="prop-name">disableFocusListener</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Do not respond to focus events. |
 | <span class="prop-name">disableHoverListener</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Do not respond to hover events. |
+| <span class="prop-name">disableInteractive</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Makes a tooltip not interactive, i.e. it will close when the user hovers over the tooltip before the `leaveDelay` is expired. |
 | <span class="prop-name">disableTouchListener</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Do not respond to long press touch events. |
 | <span class="prop-name">enterDelay</span> | <span class="prop-type">number</span> | <span class="prop-default">100</span> | The number of milliseconds to wait before showing the tooltip. This prop won't impact the enter touch delay (`enterTouchDelay`). |
 | <span class="prop-name">enterNextDelay</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | The number of milliseconds to wait before showing the tooltip when one was already recently opened. |
@@ -60,6 +61,7 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">popper</span> | <span class="prop-name">.MuiTooltip-popper</span> | Styles applied to the Popper component.
+| <span class="prop-name">popperInteractive</span> | <span class="prop-name">.MuiTooltip-popperInteractive</span> | Styles applied to the Popper component unless `disableInteractive={true}`.
 | <span class="prop-name">popperArrow</span> | <span class="prop-name">.MuiTooltip-popperArrow</span> | Styles applied to the Popper component if `arrow={true}`.
 | <span class="prop-name">tooltip</span> | <span class="prop-name">.MuiTooltip-tooltip</span> | Styles applied to the tooltip (label wrapper) element.
 | <span class="prop-name">tooltipArrow</span> | <span class="prop-name">.MuiTooltip-tooltipArrow</span> | Styles applied to the tooltip (label wrapper) element if `arrow={true}`.
diff --git a/docs/src/pages/components/tooltips/NonInteractiveTooltips.js b/docs/src/pages/components/tooltips/NonInteractiveTooltips.js
new file mode 100644
index 00000000000000..3ac4c3eafa020d
--- /dev/null
+++ b/docs/src/pages/components/tooltips/NonInteractiveTooltips.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+
+export default function NotInteractiveTooltips() {
+  return (
+    <Tooltip title="Add" disableInteractive>
+      <Button>Not interactive</Button>
+    </Tooltip>
+  );
+}
diff --git a/docs/src/pages/components/tooltips/NonInteractiveTooltips.tsx b/docs/src/pages/components/tooltips/NonInteractiveTooltips.tsx
new file mode 100644
index 00000000000000..3ac4c3eafa020d
--- /dev/null
+++ b/docs/src/pages/components/tooltips/NonInteractiveTooltips.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+
+export default function NotInteractiveTooltips() {
+  return (
+    <Tooltip title="Add" disableInteractive>
+      <Button>Not interactive</Button>
+    </Tooltip>
+  );
+}
diff --git a/docs/src/pages/components/tooltips/tooltips.md b/docs/src/pages/components/tooltips/tooltips.md
index 5d6fa22a21b82a..e338574b3428dc 100644
--- a/docs/src/pages/components/tooltips/tooltips.md
+++ b/docs/src/pages/components/tooltips/tooltips.md
@@ -76,6 +76,14 @@ The `Tooltip` wraps long text by default to make it readable.
 
 {{"demo": "pages/components/tooltips/VariableWidth.js"}}
 
+## Interactive
+
+Tooltips are interactive by default (to pass [WCAG 2.1 success criterion 1.4.13](https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus)).
+It won't close when the user hovers over the tooltip before the `leaveDelay` is expired.
+You can disable this behavior (thus failing the success criterion which is required to reach level AA) by passing `disableInteractive`.
+
+{{"demo": "pages/components/tooltips/NonInteractiveTooltips.js"}}
+
 ## 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`.
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index 5580d910c38c99..fab87cf91c5ec2 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -777,9 +777,19 @@ const theme = createMuiTheme({
   ```
 ### Tooltip
 
-- Removed the `interactive` prop.
-  The tooltip implements this behavior by default now.
-  The previous default behavior (`interactive={false}`) failed [success criterion 1.4.3 ("hoverable") in WCAG 2.1](https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus).
+- Tooltips are now interactive by default.
+
+  The previous default behavior failed [success criterion 1.4.3 ("hoverable") in WCAG 2.1](https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus).
+  To reflect the new default value, the prop was renamed to `disableInteractive`.
+  If you want to restore the old behavior (thus not reaching level AA), you can apply the following diff:
+
+  ```diff
+  -<Tooltip>
+  +<Tooltip disableInteractive>
+  # Interactive tooltips no longer need the `interactive` prop.
+  -<Tooltip interactive>
+  +<Tooltip>
+  ```
 
 ### Typography
 
diff --git a/packages/material-ui/src/Tooltip/Tooltip.d.ts b/packages/material-ui/src/Tooltip/Tooltip.d.ts
index c3e20538c1b58a..59b0183ce670b7 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.d.ts
+++ b/packages/material-ui/src/Tooltip/Tooltip.d.ts
@@ -19,6 +19,8 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
   classes?: {
     /** Styles applied to the Popper component. */
     popper?: string;
+    /** Styles applied to the Popper component unless `disableInteractive={true}`. */
+    popperInteractive?: string;
     /** Styles applied to the Popper component if `arrow={true}`. */
     popperArrow?: string;
     /** Styles applied to the tooltip (label wrapper) element. */
@@ -54,6 +56,11 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    * @default false
    */
   disableHoverListener?: boolean;
+  /**
+   * Makes a tooltip not interactive, i.e. it will close when the user
+   * hovers over the tooltip before the `leaveDelay` is expired.
+   */
+  disableInteractive?: boolean;
   /**
    * Do not respond to long press touch events.
    * @default false
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 6775d3ece96c7f..3c3dab4db6e04e 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -69,6 +69,11 @@ export const styles = (theme) => ({
   /* Styles applied to the Popper component. */
   popper: {
     zIndex: theme.zIndex.tooltip,
+    pointerEvents: 'none', // disable jss-rtl plugin
+  },
+  /* Styles applied to the Popper component unless `disableInteractive={true}`. */
+  popperInteractive: {
+    pointerEvents: 'auto',
   },
   /* Styles applied to the Popper component if `arrow={true}`. */
   popperArrow: arrowGenerator(),
@@ -169,6 +174,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     enterNextDelay = 0,
     enterTouchDelay = 700,
     id: idProp,
+    disableInteractive = false,
     leaveDelay = 0,
     leaveTouchDelay = 1500,
     onClose,
@@ -480,16 +486,20 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     childrenProps.onMouseOver = handleEnter();
     childrenProps.onMouseLeave = handleLeave();
 
-    interactiveWrapperListeners.onMouseOver = handleEnter(false);
-    interactiveWrapperListeners.onMouseLeave = handleLeave(false);
+    if (!disableInteractive) {
+      interactiveWrapperListeners.onMouseOver = handleEnter(false);
+      interactiveWrapperListeners.onMouseLeave = handleLeave(false);
+    }
   }
 
   if (!disableFocusListener) {
     childrenProps.onFocus = handleFocus();
     childrenProps.onBlur = handleLeave();
 
-    interactiveWrapperListeners.onFocus = handleFocus(false);
-    interactiveWrapperListeners.onBlur = handleLeave(false);
+    if (!disableInteractive) {
+      interactiveWrapperListeners.onFocus = handleFocus(false);
+      interactiveWrapperListeners.onBlur = handleLeave(false);
+    }
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -524,6 +534,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
       {React.cloneElement(children, childrenProps)}
       <PopperComponent
         className={clsx(classes.popper, {
+          [classes.popperInteractive]: !disableInteractive,
           [classes.popperArrow]: arrow,
         })}
         placement={placement}
@@ -598,6 +609,11 @@ Tooltip.propTypes = {
    * @default false
    */
   disableHoverListener: PropTypes.bool,
+  /**
+   * Makes a tooltip not interactive, i.e. it will close when the user
+   * hovers over the tooltip before the `leaveDelay` is expired.
+   */
+  disableInteractive: PropTypes.bool,
   /**
    * Do not respond to long press touch events.
    * @default false
diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index be2455c86fa4f0..a9ba0b66c06fd3 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -633,7 +633,7 @@ describe('<Tooltip />', () => {
     it('should ignore event from the tooltip', () => {
       const handleMouseOver = spy();
       const { getByRole } = render(
-        <Tooltip title="Hello World" open>
+        <Tooltip title="Hello World" open interactive>
           <button type="submit" onMouseOver={handleMouseOver}>
             Hello World
           </button>
@@ -698,65 +698,68 @@ describe('<Tooltip />', () => {
     });
   });
 
-  it('should keep the overlay open if the popper element is hovered', () => {
-    const { getByRole } = render(
-      <Tooltip
-        title="Hello World"
-        enterDelay={100}
-        leaveDelay={111}
-        TransitionProps={{ timeout: 10 }}
-      >
-        <button id="testChild" type="submit">
-          Hello World
-        </button>
-      </Tooltip>,
-    );
+  describe('prop: interactive', () => {
+    it('should keep the overlay open if the popper element is hovered', () => {
+      const { getByRole } = render(
+        <Tooltip
+          title="Hello World"
+          enterDelay={100}
+          interactive
+          leaveDelay={111}
+          TransitionProps={{ timeout: 10 }}
+        >
+          <button id="testChild" type="submit">
+            Hello World
+          </button>
+        </Tooltip>,
+      );
 
-    fireEvent.mouseOver(getByRole('button'));
-    act(() => {
-      clock.tick(100);
-    });
+      fireEvent.mouseOver(getByRole('button'));
+      act(() => {
+        clock.tick(100);
+      });
 
-    expect(getByRole('tooltip')).toBeVisible();
+      expect(getByRole('tooltip')).toBeVisible();
 
-    fireEvent.mouseLeave(getByRole('button'));
+      fireEvent.mouseLeave(getByRole('button'));
 
-    expect(getByRole('tooltip')).toBeVisible();
+      expect(getByRole('tooltip')).toBeVisible();
 
-    fireEvent.mouseOver(getByRole('tooltip'));
-    clock.tick(111 + 10);
+      fireEvent.mouseOver(getByRole('tooltip'));
+      clock.tick(111 + 10);
 
-    expect(getByRole('tooltip')).toBeVisible();
-  });
+      expect(getByRole('tooltip')).toBeVisible();
+    });
 
-  it('should not animate twice', () => {
-    const { getByRole } = render(
-      <Tooltip title="Hello World" enterDelay={500} TransitionProps={{ timeout: 10 }}>
-        <button id="testChild" type="submit">
-          Hello World
-        </button>
-      </Tooltip>,
-    );
+    it('should not animate twice', () => {
+      const { getByRole } = render(
+        <Tooltip title="Hello World" interactive enterDelay={500} TransitionProps={{ timeout: 10 }}>
+          <button id="testChild" type="submit">
+            Hello World
+          </button>
+        </Tooltip>,
+      );
 
-    fireEvent.mouseOver(getByRole('button'));
-    act(() => {
-      clock.tick(500);
-    });
+      fireEvent.mouseOver(getByRole('button'));
+      act(() => {
+        clock.tick(500);
+      });
 
-    expect(getByRole('tooltip')).toBeVisible();
+      expect(getByRole('tooltip')).toBeVisible();
 
-    fireEvent.mouseLeave(getByRole('button'));
+      fireEvent.mouseLeave(getByRole('button'));
 
-    expect(getByRole('tooltip')).toBeVisible();
+      expect(getByRole('tooltip')).toBeVisible();
 
-    fireEvent.mouseOver(getByRole('tooltip'));
-    clock.tick(10);
+      fireEvent.mouseOver(getByRole('tooltip'));
+      clock.tick(10);
 
-    expect(getByRole('tooltip')).toBeVisible();
+      expect(getByRole('tooltip')).toBeVisible();
 
-    // TOD: Unclear why not running triggers microtasks but runAll does not trigger microtasks
-    // can be removed once Popper#update is sync
-    clock.runAll();
+      // TOD: Unclear why not running triggers microtasks but runAll does not trigger microtasks
+      // can be removed once Popper#update is sync
+      clock.runAll();
+    });
   });
 
   describe('prop: PopperProps', () => {
@@ -883,7 +886,7 @@ describe('<Tooltip />', () => {
         );
       });
       const { getByRole } = render(
-        <Tooltip open title="test">
+        <Tooltip interactive open title="test">
           <TextField onFocus={handleFocus} />
         </Tooltip>,
       );

From 57f0f10aeac58d628ac914501344cf842a9a6800 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 5 Oct 2020 10:12:13 +0200
Subject: [PATCH 3/5] Better formatting for migration

---
 docs/src/pages/guides/migration-v4/migration-v4.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index fab87cf91c5ec2..54e58389d25062 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -775,6 +775,7 @@ const theme = createMuiTheme({
   +import ToggleButton from '@material-ui/core/ToggleButton';
   +import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
   ```
+
 ### Tooltip
 
 - Tooltips are now interactive by default.
@@ -786,6 +787,7 @@ const theme = createMuiTheme({
   ```diff
   -<Tooltip>
   +<Tooltip disableInteractive>
+
   # Interactive tooltips no longer need the `interactive` prop.
   -<Tooltip interactive>
   +<Tooltip>

From 62246d12eba3d39db6a1c20449260c55fe29c3e3 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 5 Oct 2020 10:54:43 +0200
Subject: [PATCH 4/5] Update tests

---
 .../material-ui/src/Tooltip/Tooltip.test.js   | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index a9ba0b66c06fd3..011bdba116c7be 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -633,7 +633,7 @@ describe('<Tooltip />', () => {
     it('should ignore event from the tooltip', () => {
       const handleMouseOver = spy();
       const { getByRole } = render(
-        <Tooltip title="Hello World" open interactive>
+        <Tooltip title="Hello World" open>
           <button type="submit" onMouseOver={handleMouseOver}>
             Hello World
           </button>
@@ -698,13 +698,12 @@ describe('<Tooltip />', () => {
     });
   });
 
-  describe('prop: interactive', () => {
-    it('should keep the overlay open if the popper element is hovered', () => {
+  describe('prop: disableInteractive', () => {
+    it('when false should keep the overlay open if the popper element is hovered', () => {
       const { getByRole } = render(
         <Tooltip
           title="Hello World"
           enterDelay={100}
-          interactive
           leaveDelay={111}
           TransitionProps={{ timeout: 10 }}
         >
@@ -731,9 +730,14 @@ describe('<Tooltip />', () => {
       expect(getByRole('tooltip')).toBeVisible();
     });
 
-    it('should not animate twice', () => {
+    it('when `true` should not keep the overlay open if the popper element is hovered', () => {
       const { getByRole } = render(
-        <Tooltip title="Hello World" interactive enterDelay={500} TransitionProps={{ timeout: 10 }}>
+        <Tooltip
+          title="Hello World"
+          enterDelay={100}
+          leaveDelay={111}
+          TransitionProps={{ timeout: 10 }}
+        >
           <button id="testChild" type="submit">
             Hello World
           </button>
@@ -742,7 +746,7 @@ describe('<Tooltip />', () => {
 
       fireEvent.mouseOver(getByRole('button'));
       act(() => {
-        clock.tick(500);
+        clock.tick(100);
       });
 
       expect(getByRole('tooltip')).toBeVisible();
@@ -752,13 +756,9 @@ describe('<Tooltip />', () => {
       expect(getByRole('tooltip')).toBeVisible();
 
       fireEvent.mouseOver(getByRole('tooltip'));
-      clock.tick(10);
-
-      expect(getByRole('tooltip')).toBeVisible();
+      clock.tick(111 + 10);
 
-      // TOD: Unclear why not running triggers microtasks but runAll does not trigger microtasks
-      // can be removed once Popper#update is sync
-      clock.runAll();
+      expect(getByRole('tooltip')).not.toBeVisible();
     });
   });
 
@@ -886,7 +886,7 @@ describe('<Tooltip />', () => {
         );
       });
       const { getByRole } = render(
-        <Tooltip interactive open title="test">
+        <Tooltip open title="test">
           <TextField onFocus={handleFocus} />
         </Tooltip>,
       );

From 717c973686e20d75a8def8e1e915b60f6b44669a Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 5 Oct 2020 11:24:22 +0200
Subject: [PATCH 5/5] Update TSDOC

---
 packages/material-ui/src/Tooltip/Tooltip.d.ts | 1 +
 packages/material-ui/src/Tooltip/Tooltip.js   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.d.ts b/packages/material-ui/src/Tooltip/Tooltip.d.ts
index 59b0183ce670b7..bed17e51f14b2c 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.d.ts
+++ b/packages/material-ui/src/Tooltip/Tooltip.d.ts
@@ -59,6 +59,7 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
   /**
    * Makes a tooltip not interactive, i.e. it will close when the user
    * hovers over the tooltip before the `leaveDelay` is expired.
+   * @default false
    */
   disableInteractive?: boolean;
   /**
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 3c3dab4db6e04e..7a06f06d2a9ea5 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -612,6 +612,7 @@ Tooltip.propTypes = {
   /**
    * Makes a tooltip not interactive, i.e. it will close when the user
    * hovers over the tooltip before the `leaveDelay` is expired.
+   * @default false
    */
   disableInteractive: PropTypes.bool,
   /**