指定`document.body`作为material-ui Tooltip的容器元素

Question

问题：想要显示从左侧指向元素（referenceEl）的工具提示。 referenceEl位于宽度有限（60px）且应用了overflow: hidden css道具的容器内。工具提示会在其引用元素后附加，因此它们在DOM中共享相同的容器。这导致工具提示部分显示。

Bootstrap 4 Tooltip api提供container选项，其中可以指定'body'作为追加点的替代容器：http://getbootstrap.com/docs/4.0/components/tooltips/#options

如何在material-ui@beta反应中实现此功能？

使用的

material-ui版本：1.0.0-beta.31
工具提示参考：https://material-ui-next.com/api/tooltip/#tooltip
工具提示演示页面：https://material-ui-next.com/demos/tooltips/#tooltips

bootstrap工具提示实现部分：https://github.com/twbs/bootstrap/blob/v4-dev/js/src/tooltip.js#L277-L283

mui工具提示渲染部分：https://github.com/mui-org/material-ui/blob/v1-beta/src/Tooltip/Tooltip.js#L305-L360

示例代码：

<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

在最新版本v. 1.4.0中，这是可能的。请参阅工具提示PaperProps属性。