Open AnttiSarjanoja opened 4 months ago
@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.
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?
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.
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.
Steps to reproduce
Link to live example: https://stackblitz.com/edit/react-fzslv1?file=Demo.tsx
Steps:
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