1

Seems impossible to place <Tooltip> "on top" (stacked/layered above) the triggering anchor element.

It always appears outside the parent, using "placement" to decide where. I believe it's the Flip tool within Popper that manages placement and ensures visibility. I've tried passing Popper option modifiers to disable flip, and adjusting the offset. Some recommendations were to skip preventing overflow, and disable GPU acceleration. I'm down a rabbit-hole of MaterialUI internals to accomplish this. I commented out what seems like unlikely overkill solutions.

Example outside MUI: react-tooltip (includes pointer tracking, beyond this question).

<Tooltip title="My Label" placement="top" PopperProps={{
  popperOptions: {
    modifiers: {
      flip: { enabled: false },
      // computeStyle: {
      //   gpuAcceleration: false
      // },
      // preventOverflow: {
      //   enabled: false,
      //   padding: 0
      // },
      offset: {
        offset: '-20px -20px'
      }
    }
  }
}}></Tooltip>
    <h3>My Text</h3>
</Tooltip>
NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
doublejosh
  • 5,548
  • 4
  • 39
  • 45
  • Can you add an image of what should be the solution? I'm not sure I'm following what you are trying to achieve. – Dekel Apr 09 '20 at 01:03
  • I don't have a visual yet, I've updated the description to be more clear. MUI forces Tooltip outside of the anchor element. – doublejosh Apr 09 '20 at 18:00

1 Answers1

2

You need to enable the offset like this:

<Tooltip title="My Label" placement="top" PopperProps={{
  popperOptions: {
    modifiers: {
      flip: { enabled: false },
      offset: {
        enabled: true,
        offset: '0px -60px'
      }
    }
  }
}}>
    <h3>My Text</h3>
</Tooltip>

this will enable you to place the tooltip on top

istvan kolkert
  • 122
  • 1
  • 10
  • I was hopeful, but this **does not work** ...the tooltip is still _not allowed_ layered over the triggering element. I added an example of this outside MUI. – doublejosh Apr 22 '20 at 19:57
  • Let me check, it worked for me, i will create a sandbox to show you what i did – istvan kolkert Apr 23 '20 at 10:10
  • My bad, it worked using a fab: https://codesandbox.io/s/material-demo-yv8d4?file=/demo.js. It also works when using position absolute but thats a lot more work getting it on the correct location – istvan kolkert Apr 23 '20 at 10:19
  • NICE. I added the PopperProps to the first example and that works too. OMG, two viable options!!! If you edit your answer slightly, I can upvote. – doublejosh Apr 23 '20 at 22:54
  • @doublejosh But we still dont know how to get it to work with a something like a h3, which your original question was about, or did you manage to get that to work too? – istvan kolkert Apr 24 '20 at 13:40
  • For MUI5, the format of the PopperOptions has changed - https://mui.com/material-ui/api/popper/ – chrismarx Jan 31 '23 at 04:05