diff --git a/docs/pages/api/tooltip.md b/docs/pages/api/tooltip.md index 7b812201c194f8..32a820145ba3f1 100644 --- a/docs/pages/api/tooltip.md +++ b/docs/pages/api/tooltip.md @@ -30,7 +30,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | disableFocusListener | bool | false | Do not respond to focus events. | | disableHoverListener | bool | false | Do not respond to hover events. | | disableTouchListener | bool | false | Do not respond to long press touch events. | -| enterDelay | number | 0 | The number of milliseconds to wait before showing the tooltip. This prop won't impact the enter touch delay (`enterTouchDelay`). | +| enterDelay | number | 200 | The number of milliseconds to wait before showing the tooltip. This prop won't impact the enter touch delay (`enterTouchDelay`). | +| enterNextDelay | number | 0 | The number of milliseconds to wait before showing the tooltip when one was already recently opened. | | enterTouchDelay | number | 700 | The number of milliseconds a user must touch the element before showing the tooltip. | | id | string | | 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. | | interactive | bool | false | Makes a tooltip interactive, i.e. will not close when the user hovers over the tooltip before the `leaveDelay` is expired. | diff --git a/packages/material-ui/src/Tooltip/Tooltip.d.ts b/packages/material-ui/src/Tooltip/Tooltip.d.ts index 539c058c5f1414..201d5728f71990 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.d.ts +++ b/packages/material-ui/src/Tooltip/Tooltip.d.ts @@ -11,6 +11,7 @@ export interface TooltipProps disableHoverListener?: boolean; disableTouchListener?: boolean; enterDelay?: number; + enterNextDelay?: number; enterTouchDelay?: number; id?: string; interactive?: boolean; diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index ff299f448a9a05..1357e69a9ee7f4 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -183,7 +183,8 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { disableFocusListener = false, disableHoverListener = false, disableTouchListener = false, - enterDelay = 0, + enterDelay = 200, + enterNextDelay = 0, enterTouchDelay = 700, id: idProp, interactive = false, @@ -303,11 +304,14 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { clearTimeout(enterTimer.current); clearTimeout(leaveTimer.current); - if (enterDelay && !hystersisOpen) { + if (enterDelay || (hystersisOpen && enterNextDelay)) { event.persist(); - enterTimer.current = setTimeout(() => { - handleOpen(event); - }, enterDelay); + enterTimer.current = setTimeout( + () => { + handleOpen(event); + }, + hystersisOpen ? enterNextDelay : enterDelay, + ); } else { handleOpen(event); } @@ -345,9 +349,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { clearTimeout(hystersisTimer); hystersisTimer = setTimeout(() => { hystersisOpen = false; - }, 500); - // Use 500 ms per https://github.com/reach/reach-ui/blob/3b5319027d763a3082880be887d7a29aee7d3afc/packages/tooltip/src/index.js#L214 - + }, 800 + leaveDelay); setOpenState(false); if (onClose) { @@ -569,6 +571,10 @@ Tooltip.propTypes = { * This prop won't impact the enter touch delay (`enterTouchDelay`). */ enterDelay: PropTypes.number, + /** + * The number of milliseconds to wait before showing the tooltip when one was already recently opened. + */ + enterNextDelay: PropTypes.number, /** * The number of milliseconds a user must touch the element before showing the tooltip. */ diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js index ee89abcbd5aaf6..0f7e51c096f594 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.test.js +++ b/packages/material-ui/src/Tooltip/Tooltip.test.js @@ -36,6 +36,7 @@ describe('', () => { const render = createClientRender({ strict: false }); let clock; const defaultProps = { + enterDelay: 0, children: (