Material-ui Tooltip Not Working Properly

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 h

Solution 1:

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>

Solution 2:

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