tooltip persists at (0, 0) when element reloads

[githorse]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Sometimes when I reload my screen while a tooltip is displayed, the tooltip comes unglued from the element it decorates and jumps to the top left corner of my screen. Presumably this is happening when the element is removed from the DOM and replaced with a similar one.

I'm attempting to reproduce this in CodeSandbox but so far without success. Locally it occurs when my tooltip is rendered inside a third-party datagrid component, and it's been difficult to reproduce without the full stack. But maybe someone has a quick answer here for how it might be fixed.

Current behavior 😯

When I reload data (in a specific way the presumably removes the tooltipped element from the DOM) the tooltip jumps to the top left corner of the screen, while a second tooltip appears where the first one was (i.e., in the expected location). The screen now shows two identical tooltips, one in the top left corner unconnected to the original element.

Here's what that looks like in the DOM:

Expected behavior 🤔

The tooltip should go away if the element it's connected to disappears (at least, I think that's what's happening).

Context 🔦

I have a DevExtreme DataGrid component, one column of which has a tooltip in it. When I reload the data in the grid, something happens to the underlying element and the tooltip jumps to the top left corner of the screen.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.15 Linux Mint 21 (Vanessa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 4.71 GB / 15.32 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 3.2.4 - ~/.yarn/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Managers:
    Cargo: 1.51.0 - ~/.cargo/bin/cargo
    pip3: 22.0.2 - /usr/bin/pip3
  Utilities:
    CMake: 3.22.1 - /usr/bin/cmake
    Make: 4.3 - /usr/bin/make
    GCC: 11.3.0 - /usr/bin/gcc
    Git: 2.34.1 - /usr/bin/git
    Ninja: 1.10.1 - /usr/bin/ninja
    FFmpeg: 4.4.2 - /usr/bin/ffmpeg
  Virtualization:
    Docker: 23.0.5 - /usr/bin/docker
  IDEs:
    Nano: 6.2 - /usr/bin/nano
    Vim: 0.10.0 - /usr/bin/vim
  Languages:
    Bash: 5.1.16 - /usr/bin/bash
    Perl: 5.34.0 - /usr/bin/perl
    Protoc: 3.17.0 - /usr/local/bin/protoc
    Python3: 3.10.6 - /usr/bin/python3
  Databases:
  Browsers:
    Chromium: 112.0.5615.165
    Firefox: 112.0.2
  Monorepos:
    Yarn Workspaces: 3.2.4
    Lerna: 5.6.2

[mj12albert]

the tooltip comes unglued from the element it decorates

@githorse I can reproduce this. At a glance, it could be related to anchorEl https://mui.com/material-ui/react-tooltip/#virtual-element 🤔

It's passed to the Popper component which is used by Tooltip

[rock-eb]

I also can reproduce this in the mui website. Pay attention to the initial position of the tooltip after refresh the page.

https://github.com/mui/material-ui/assets/86214404/3e75d93b-266d-45e3-bf07-25a1a900ac7c

[NiranjanNimbalkar2021]

I am also facing the same issue but in my case it happens when clicked on component. My component has tooltip on hover and when clicked on the component the page reloads as it sorts the table column, this is when the tooltip moves to 0,0 location till the page is reloaded.

My MUI version is "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.60", "@material-ui/pickers": "^3.3.10", "@material-ui/styles": "^4.11.4",

[romgrk]

We also have a case of this in the grid, which I have reduced to this case: https://stackblitz.com/edit/react-zkzzrs?file=Demo.tsx If the popper is open={true} at page load time, the popover opens at (0, 0).