mui / mui/material-ui

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

Open
#41,745 4 comments 0 reactions 1 assignee View on GitHub

@siriwatknp is already working on this.

Since Apr 2, 2024.

scope: tooltip type: enhancement
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:

  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.