I'm trying to use the material-ui tooltip. I want the tooltip to be displayed at the top. Even after setting placement="top" The demo can be found here

What am I doing wrong in here?

I'm trying to use the material-ui tooltip. I want the tooltip to be displayed at the top. Even after setting placement="top" The demo can be found here

What am I doing wrong in here?

• javascript
• reactjs
• material-ui

• For touch event for mobile, see - stackoverflow./a/70270694/984471 – Manohar Reddy Poreddy Commented Dec 8, 2021 at 6:13

2 Answers 2

Because page has not enough space to show tooltip on top position Just add simple padding then try it again.

<div style={{padding: '50px'}}>
  <Tooltip placement="top" title="Chart Type">
    <IconButton >
      <ShowChart />
    </IconButton>
  </Tooltip>
  </div>

If you use a form wrapper, the outlined variant contains a "pointer-event: none" property that would prevent the popover from getting any events.