title: Specify `document.body` as container element for material-ui Tooltip
body: <p><strong>The problem:</strong> 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 <code>overflow: hidden</code> 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.</p>
  
  <p><a href="https://i.stack.imgur.com/zHqrH.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zHqrH.gif" alt="enter image description here"></a></p>
  
  <p>Bootstrap 4 Tooltip api provides a <code>container</code> option, where one can specify <code>'body'</code> as an alternative container for the append point: <a href="http://getbootstrap.com/docs/4.0/components/tooltips/#options" rel="nofollow noreferrer">http://getbootstrap.com/docs/4.0/components/tooltips/#options</a>  </p>
  
  <p>How do i achieve this feature in react <code>material-ui@beta</code>?</p>
  
  <p><code>material-ui</code> version used: <code>1.0.0-beta.31</code><br>
  tooltip reference: <a href="https://material-ui-next.com/api/tooltip/#tooltip" rel="nofollow noreferrer">https://material-ui-next.com/api/tooltip/#tooltip</a><br>
  tooltip demo page: <a href="https://material-ui-next.com/demos/tooltips/#tooltips" rel="nofollow noreferrer">https://material-ui-next.com/demos/tooltips/#tooltips</a></p>
  
  <p>bootstrap tooltip implementation part: <a href="https://github.com/twbs/bootstrap/blob/v4-dev/js/src/tooltip.js#L277-L283" rel="nofollow noreferrer">https://github.com/twbs/bootstrap/blob/v4-dev/js/src/tooltip.js#L277-L283</a></p>
  
  <p>mui tooltip render part: <a href="https://github.com/mui-org/material-ui/blob/v1-beta/src/Tooltip/Tooltip.js#L305-L360" rel="nofollow noreferrer">https://github.com/mui-org/material-ui/blob/v1-beta/src/Tooltip/Tooltip.js#L305-L360</a></p>
  
  <p>Example code:</p>
  
  <pre><code>&lt;Tooltip id="contacts-tooltip" 
           title={'contacts'} 
           placement={'right'} 
           enterDelay={300} leaveDelay={300}&gt;
    &lt;ListItem button 
              component={NavLink} 
              to={'/contacts'} 
              onClick={toggleDrawer(false)}
              className={classes._listItem} 
              activeClassName={classes._activeListItem}
    &gt;
      &lt;ListItemIcon&gt;
        &lt;People classes={{root: classes.iconRoot}}/&gt;
      &lt;/ListItemIcon&gt;
      &lt;ListItemText primary={'Contacts'}/&gt;
    &lt;/ListItem&gt;
  &lt;/Tooltip&gt;
  </code></pre>