material-ui tooltip display issue

[vijay-kumar-singh]

Describe the bug
Material-UI tooltip generate DOM elements out of the Web Component. I have referred https://direflow.io/guides-and-tips#tips-for-material-ui but it has only solution for popover component. Similar fix does not works for tooltip component as tooltip component does not have container attributes where domref can be passed.

To reproduce
Steps to reproduce the behavior:

1. Install 'material-ui library in direflow'
2. Open 'use Tooltip component.'
3. Build 'app'
4. See error - tooltip does not appear below/near component

Expected behavior
Tooltip should display near component when mouseover. But it display bottom of screen.

Package Manager:
To install Direflow, I used... (npm)

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
example code import React from 'react'; import RootRef from "@material-ui/core/RootRef"; const domRef = React.useRef(); <RootRef rootRef={domRef}> <Tooltip title="Delete" itemProp={{container: domRef.current}} container={domRef.current}> <deleteIcon/> </Tooltip> </RootRef>

[yosdanybm]

I also tried to use RootRef according to https://direflow.io/guides-and-tips#tips-for-material-ui but it doesn't work, the solution is to use the disablePortal attribute:

<Tooltip
      PopperProps={{
          disablePortal: true,
      }}
      title="Example tooltip"
      arrow
>
     <span> <Button>Test</Button></span>
</Tooltip>

I hope it will be useful