CODEWITHSUNDEEP
javascriptreactjsmaterial-uitooltippopper.js
Mehul Pamale
Mehul Pamale

Reputation: 406

React-js MUI Tooltip overlapping Popper

I want the MUI tooltip to go beneath the MUI Popper that is popper should overlap the tooltip. If I override the "MuiTooltip" or "MuiTooltip-popper"s z-index using external css, it's getting applied globally, which I don't want.

Is there a way to override either tooltip or popper behaviour & modify the z-index only for some portion ?

sandbox: https://codesandbox.io/s/tooltip-popper-issue-myryfv?file=/src/App.js

note: If the popper in the sandbox is not in the center, try to modify the code. Let the error appear & undo the modification.

I am using MUI v4

Tooltip over Popper

Upvotes: 1

Views: 2192

Answers (1)

Rohan Veer
Rohan Veer

Reputation: 1490

Remove external css and just add style prop to Popper component. 

<Popper
   style={{
     zIndex: 1501
   }}
   anchorEl={buttonRef.current}
>

Upvotes: 2

Related Questions