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); } }