[material-ui][Tooltip] Multiple tooltip sporadic repositioning with disablePortal and keepMounted true
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Link to live example:
https://mui.com/material-ui/react-tooltip/
Steps:
- Scroll down to the Positioned tooltips section
- Press "Show code"
- Modify the "top-start" and "top" tooltips to pass in
PopperProps={{ keepMounted: true, disablePortal: true }}to the corresponding Tooltip components. e.g:
...
<Grid item>
<Tooltip title="Add" placement="top-start" PopperProps={{ keepMounted: true, disablePortal: true }}>
<Button>top-start</Button>
</Tooltip>
<Tooltip title="Add" placement="top" PopperProps={{ keepMounted: true, disablePortal: true }}>
<Button>top</Button>
</Tooltip>
<Tooltip title="Add" placement="top-end">
...
- Hover over the Top button, and move to Top-start and vice-versa to see the sporadic movement
Current behavior 😯
When moving the mouse from one tooltip trigger to another, the current one will move position before disappearing, creating a jarring visual effect
https://github.com/mui/material-ui/assets/31372543/a351cff8-523c-427f-b7ea-ebd776887a68
Expected behavior 🤔
The same way that it does when PopperProps={{ keepMounted: true, disablePortal: true }} has not been added to the Tooltip components. That is, the tooltip will simply fade out without changing position when the mouse hovers over a different Tooltip trigger
Context 🔦
keepMounted and disablePortal are needed in this case in order to maintain the Dom's structure for SEO purposes
Your environment 🌎
Chrome 120.0.6099.109
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.
Research direction
Start with the live Material UI Tooltip example and reproduce the issue using PopperProps={{ keepMounted: true, disablePortal: true }} on the positioned tooltips. Trace the Tooltip and positioning behavior responsible for movement between the top and top-start triggers; done means the active tooltip fades out without repositioning, matching behavior without those props.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100