[Tooltip] Support tooltips for disabled buttons

mui · Oct 15, 2020 · faaba7e · faaba7e
1 parent 777c1a1
commit faaba7e
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 13 deletions.
diff --git a/docs/src/pages/components/tooltips/DisabledTooltips.js b/docs/src/pages/components/tooltips/DisabledTooltips.js
@@ -5,9 +5,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 export default function DisabledTooltips() {
   return (
     <Tooltip title="You don't have permission to do this">
-      <span>
-        <Button disabled>A Disabled Button</Button>
-      </span>
+      <Button disabled>A Disabled Button</Button>
     </Tooltip>
   );
 }
diff --git a/docs/src/pages/components/tooltips/DisabledTooltips.tsx b/docs/src/pages/components/tooltips/DisabledTooltips.tsx
@@ -5,9 +5,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 export default function DisabledTooltips() {
   return (
     <Tooltip title="You don't have permission to do this">
-      <span>
-        <Button disabled>A Disabled Button</Button>
-      </span>
+      <Button disabled>A Disabled Button</Button>
     </Tooltip>
   );
 }
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js
@@ -36,7 +36,6 @@ export const styles = {
       borderStyle: 'none', // Remove Firefox dotted outline.
     },
     '&$disabled': {
-      pointerEvents: 'none', // Disable link interactions
       cursor: 'default',
     },
     '@media print': {

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -263,8 +263,8 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
   const handleEnter = (forward = true) => (event) => {
     const childrenProps = children.props;
 
-    if (event.type === 'mouseover' && childrenProps.onMouseOver && forward) {
-      childrenProps.onMouseOver(event);
+    if (event.type === 'pointerenter' && childrenProps.onPointerEnter && forward) {
+      childrenProps.onPointerEnter(event);
     }
 
     if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
@@ -501,12 +501,12 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
   }
 
   if (!disableHoverListener) {
-    childrenProps.onMouseOver = handleEnter();
-    childrenProps.onMouseLeave = handleLeave();
+    childrenProps.onPointerEnter = handleEnter();
+    childrenProps.onPointerLeave = handleLeave();
 
     if (!disableInteractive) {
-      interactiveWrapperListeners.onMouseOver = handleEnter(false);
-      interactiveWrapperListeners.onMouseLeave = handleLeave(false);
+      interactiveWrapperListeners.onPointerEnter = handleEnter(false);
+      interactiveWrapperListeners.onPointerLeave = handleLeave(false);
     }
   }