指定`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
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 属性。