[material-ui][Tooltip] enterDelay prop resets timer on every child mouseOver event
@siriwatknp is already working on this.
Since Apr 2, 2024.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: https://stackblitz.com/edit/react-fzslv1?file=Demo.tsx
Steps:
- MUI Tooltip that has enterDelay AND a child that is a container that contains 2+ other dom elements that may contain more children
- If you hover and move the cursor between any of the child dom elements, they will trigger onMouseOver events that will bubble up to Tooltip and always reset the enterDelay timer in the handleMouseOver
https://github.com/mui/material-ui/blob/next/packages/mui-material/src/Tooltip/Tooltip.js#L369 - Because the delay resets, container Tooltip will never appear unless the user stops the cursor on a child element
Current behavior
Tooltip never appears because child events reset the enterDelay
Expected behavior
Container specific tooltip should only be interested in onMouseOver that actually targets the container. Tooltips should appear on container after enterDelay even if user hovers between content children.
Context
Now this is quite specific BUT we have a container that we want to show tooltip on. That container has multiple children that have multiple children etc. and they are quite small in size (icon, one-word header) and it is easy for the user to wander around the container with the cursor. We want to show the tooltip for the user if the cursor has been on container for the delay.
Workaround atm. is to write specific onMouseOver handlers for every child the tooltip container has to not bubble events but if the component is complex this will produce loads of boilerplate.
I did not find any specific mentions that enterDelay + Tooltips on containers are not supported.
Your environment
System:
OS: macOS 14.4.1
Binaries:
Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 123.0.6312.87
Edge: 123.0.2420.65
Safari: 17.4.1
npmPackages:
@emotion/react: 11.11.3
@emotion/styled: 11.11.0
@mui/base: 5.0.0-beta.33
@mui/core-downloads-tracker: 5.15.6
@mui/lab: 5.0.0-alpha.169
@mui/material: ^5.15.6 => 5.15.6
@mui/private-theming: 5.15.14
@mui/styled-engine: 5.15.14
@mui/system: 5.15.14
@mui/types: 7.2.14
@mui/utils: 5.15.14
@mui/x-data-grid: 6.19.1
@mui/x-data-grid-pro: ^6.19.1 => 6.19.1
@mui/x-date-pickers: 6.19.2
@mui/x-date-pickers-pro: ^6.19.2 => 6.19.2
@mui/x-license-pro: ^6.10.2 => 6.10.2
@types/react: ^18.2.48 => 18.2.48
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^5.1.6 => 5.3.3
Search keywords: tooltip enterdelay child mouseover
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.