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

Question

Problem: Want to display a tooltip pointing to an element (referenceEl) on the left. The El link is located inside a container with a limited width (60 pixels) and attached overflow: hidden css details. A tooltip is added after the link element, so they share the same container in the DOM. This tooltip shows partially.

The Boottrap 4 Tooltip api provides a container parameter where you can specify 'body' as an alternative container for the add point: http://getbootstrap.com/docs/4.0/components/tooltips/#options

How to achieve this function in the material-ui@beta reaction?

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

part of the bootstrap tooltip implementation: 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

Code example:

 <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>