diff --git a/docs/src/pages/components/tooltips/DisabledTooltips.js b/docs/src/pages/components/tooltips/DisabledTooltips.js
index 7bad994065773c..72152d65122a13 100644
--- 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 (
-
-
-
+
);
}
diff --git a/docs/src/pages/components/tooltips/DisabledTooltips.tsx b/docs/src/pages/components/tooltips/DisabledTooltips.tsx
index 7bad994065773c..72152d65122a13 100644
--- 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 (
-
-
-
+
);
}
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js
index 400b1f592bed7b..229bd1f488e429 100644
--- 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
index 6e6c50da4a7f43..b103ff5eb59cc4 100644
--- 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') {
@@ -387,14 +387,16 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
};
const handleTouchStart = (event) => {
- detectTouchStart(event);
- clearTimeout(leaveTimer.current);
- clearTimeout(closeTimer.current);
- clearTimeout(touchTimer.current);
- event.persist();
- touchTimer.current = setTimeout(() => {
- handleEnter()(event);
- }, enterTouchDelay);
+ if (typeof PointerEvent === 'undefined') {
+ detectTouchStart(event);
+ clearTimeout(leaveTimer.current);
+ clearTimeout(closeTimer.current);
+ clearTimeout(touchTimer.current);
+ event.persist();
+ touchTimer.current = setTimeout(() => {
+ handleEnter()(event);
+ }, enterTouchDelay);
+ }
};
const handleTouchEnd = (event) => {
@@ -402,12 +404,14 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
children.props.onTouchEnd(event);
}
- clearTimeout(touchTimer.current);
- clearTimeout(leaveTimer.current);
- event.persist();
- leaveTimer.current = setTimeout(() => {
- handleClose(event);
- }, leaveTouchDelay);
+ if (typeof PointerEvent === 'undefined') {
+ clearTimeout(touchTimer.current);
+ clearTimeout(leaveTimer.current);
+ event.persist();
+ leaveTimer.current = setTimeout(() => {
+ handleClose(event);
+ }, leaveTouchDelay);
+ }
};
React.useEffect(() => {
@@ -501,12 +505,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);
}
}