Specify `document.body` as container element for material-ui Tooltip

Question

The problem: want to display a tooltip pointing to an element (referenceEl) from the left. The referenceEl is inside of a container with limited (60px) width and overflow: hidden css props applied. The tooltip gets appended after its reference element, so they share the same container in the DOM. This results tooltip partially showing.

Bootstrap 4 Tooltip api provides a container option, where one can specify 'body' as an alternative container for the append point: http://getbootstrap.com/docs/4.0/components/tooltips/#options

How do i achieve this feature in react material-ui@beta?

material-ui version used: 1.0.0-beta.31
tooltip reference: https://material-ui-next.com/api/tooltip/#tooltip
tooltip demo page: https://material-ui-next.com/demos/tooltips/#tooltips

bootstrap tooltip implementation part: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/tooltip.js#L277-L283

mui tooltip render part: https://github.com/mui-org/material-ui/blob/v1-beta/src/Tooltip/Tooltip.js#L305-L360

Example code:

<Tooltip id="contacts-tooltip" 
         title={'contacts'} 
         placement={'right'} 
         enterDelay={300} leaveDelay={300}>
  <ListItem button 
            component={NavLink} 
            to={'/contacts'} 
            onClick={toggleDrawer(false)}
            className={classes._listItem} 
            activeClassName={classes._activeListItem}
  >
    <ListItemIcon>
      <People classes={{root: classes.iconRoot}}/>
    </ListItemIcon>
    <ListItemText primary={'Contacts'}/>
  </ListItem>
</Tooltip>

Answer 1

This is possible in the latest release: v. 1.4.0. See Tooltip PaperProps property.