mui / mui/material-ui

tooltip persists at (0, 0) when element reloads

Open
#37,154 5 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

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

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:

bad-tooltips

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

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.