Material UI Tooltip appears in docked panel after opening to a new window

Current Behavior 😯

I’m currently working on a project that uses material-ui and a layout manager flexlayout-react (https://www.npmjs.com/package/flexlayout-react). The tooltip works fine when the component renders in the main window but when popped out into a new window the tooltip still appears in the main window not on the new window.

Expected Behavior 🤔

I expect the tooltip appears on the new window not on the main window when the tooltip’s child is hovered.

Steps to Reproduce 🕹

I’ve written steps to reproduce and a basic code example to represent the issue under this github repo

https://github.com/thewebmaster/material-ui-tooltip-on-flexlayout

Context 🔦

I’m working on a company project and at the moment this is being a blocker.

I’m quite new to React but as far as I understand it is because the material-ui tooltip is still using the main window/document rather than the one from the new window.

I’m just not sure how to implement it so the tooltip uses the new pop out window/document.

Flexlayout react doc mentioned something about this:

const currentDocument = this.selfRef.current.ownerDocument;
const currentWindow = currentDocument.defaultView!;

But not really sure how to implement this as I’m quite new. Any example implementations would be greatly appreciated. Thanks in advance

I’ve also asked flexlayout react about the issue with another library I’m using but no response. https://github.com/caplin/FlexLayout/issues/163

I’ve also put up a question on Stackoverflow about another library that I use that isn’t working when on new window https://stackoverflow.com/questions/67222978/flexlayout-react-draggable-library-react-beautiful-dnd-not-working-after-openi?noredirect=1#comment118913456_67222978

But still no luck. Hopefully someone could help me here and maybe I can apply the same solution to the other library that I use that aren’t working as well.

Your Environment 🌎

System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE      
    Yarn: Not Found
    npm: 7.11.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.906.0), Chromium (90.0.818.56)
  npmPackages:
    @material-ui/core: ^4.11.3 => 4.11.4 
    @material-ui/icons: ^4.11.2 => 4.11.2 
    @material-ui/styles:  4.11.4 
    @material-ui/system:  4.11.3 
    @material-ui/types:  5.1.0 
    @material-ui/utils: ^4.11.2 => 4.11.2 
    @types/react: ^17.0.4 => 17.0.4 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.2.4 => 4.2.4 

[mnajdova]

My suggestion would be, try to use a simple react portal in this scenario, probably will help you get a sense of the problem. I don’t think it is specific to the Tooltip component.

[support[bot]]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.