[material-ui][Tooltip] Multiple tooltip sporadic repositioning with disablePortal and keepMounted true

[Owenleo778]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://mui.com/material-ui/react-tooltip/

Steps:

1. Scroll down to the Positioned tooltips section
2. Press "Show code"
3. 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">
   ...

4. 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

[Owenleo778]

For a temporary solution for anyone with the same issue / the person working on this issue: If you add a small leaveDelay, such as leaveDelay={15} to the tooltips, the issue will no longer be present