[material-ui][Tooltip] enterDelay prop resets timer on every child mouseOver event

[AnttiSarjanoja]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-fzslv1?file=Demo.tsx

Steps:

1. MUI Tooltip that has enterDelay AND a child that is a container that contains 2+ other dom elements that may contain more children
2. 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
3. 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

[ZeeshanTamboli]

@AnttiSarjanoja Switching from the mouseover event to the mouseenter event for opening a Tooltip could potentially resolve this issue. I have noticed that there are several Tooltip-related issues in Material UI that might be solved from this change of mouse event.

[yasminebeji]

I've encountered similar challenges with Tooltip behavior in components before.
@AnttiSarjanoja, your observation about switching from the mouseover event to the mouseenter event sounds promising. I wonder if there's a way to implement this change without affecting other Tooltip functionalities?

[AnttiSarjanoja]

Not sure if changing the event type will help but could be tried. Another option that could work is to doublecheck that the event target and currentTarget are actually the same instance before resetting the enterDelay value.

[yasminebeji]

Hey @AnttiSarjanoja,

Thanks for chiming in with those ideas! Switching from mouseover to mouseenter does sound like it could do the trick, and double-checking the event targets seems like a smart move too.

Keeping other Tooltip functions intact is definitely a priority. Maybe we could run some tests to see how these changes play out in different scenarios before diving in? If you have any specific strategies in mind for testing or implementing these tweaks.