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

Question

問題：想要顯示從左側指向元素（referenceEl）的工具提示。 referenceEl位於寬度有限（60px）且overflow: hidden的容器內overflow: hidden css道具。 工具提示會在其引用元素后附加，因此它們在DOM中共享相同的容器。 這導致工具提示部分顯示。

Bootstrap 4 Tooltip api提供了一個container選項，可以指定'body'作為追加點的替代容器： http ： //getbootstrap.com/docs/4.0/components/tooltips/#options

我如何在react 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 。 請參見Tooltip PaperProps屬性。