React-Tooltip剪辑

Question

所以我想弄清楚如何在这里解决我的困境。

所以我面临的问题是，如果我将React-tooltip放在List元素中，它将被剪裁。如果我把React-Toolip放在底部它没有效果（这是合乎逻辑的，因为它不知道什么索引在地图之外。所以我有点卡在这里试图弄清楚如何防止裁剪。我有尝试设置z-index无济于事。我觉得React-Tooltip的位置和/或结合样式会解决这个问题。我觉得答案是正确的并不复杂，但我无法让它合作。提前谢谢。

代码如下所示：

const styles = {
  listContainer: {
    maxHeight: this.props.listMaxHeight ? this.props.listMaxHeight : '30vh',
    overflowY: 'auto',
    border: '.05vmin solid',
    borderColor: fullWhite,
  },
};

const commentCard = () => {
  if (typeof(data.md5hash) === 'string' && data.md5hash.length > 0) {
    return (
      <div>
        <div style={styles.listContainer}>
          <List>
            {comments.map((item, index) => (
              <ListItem
                id={index}
                key={index}
                leftAvatar={ <Avatar src={item.avatar} />}
                rightIconButton={
                  <IconMenu
                    disableGutters={true}
                    iconButtonElement={
                      <IconButton>
                        <MoreVertIcon color={grey400} />
                      </IconButton>
                    }>
                    <MenuItem>
                      <IconButton
                        disabled={this.checkUserRights(index)}
                        onClick={() => this.editComment(index)}
                        data-tip='Edit'
                        data-for={`sf${index}`}>
                        <FontIcon className="far fa-edit" />
                      </IconButton>
                    </MenuItem>
                    <MenuItem>
                      <IconButton
                        disabled={this.checkUserRights(index)}
                        onClick={() => this.deleteComment(index)}
                        data-tip='Delete'
                        data-for={`sf${index}`}>
                        <FontIcon className="far fa-trash-alt" />
                      </IconButton>
                    </MenuItem>
                    <ReactTooltip
                      id={`sf${index}`}
                      place='left'
                    />
                  </IconMenu>
                }
                primaryText={
                  // not relevant
                }
                secondaryText={
                  // not relevant
                }
              />
            ))}
          </List>
        </div>
        <div style={styles.actionsContainer}>
          // this is a container for the comments text area and buttons
        </div>
      </div>);
  } else {
    return null;
  }
};

编辑：

好的，我有点看到什么阻止它，但不知道解决这个问题。

这两个元素有overflowY：auto但我需要溢出：可见。我不知道如何改变它。

Answer 1

在里面提供一个className，

<ReactTooltip
  className="reacttooltip"
  id={`sf${index}`}
  place='left'
/>

在您的css文件中，或者任何样式方法（sass或样式组件），您可以为此类添加样式，

.reacttooltip {
  overflow: visible;
}

Answer 2

如果您使用 React，请尝试 React Portals。

<块引用>

门户的典型用例是父组件具有溢出：隐藏或 z-index 样式，但您需要子组件在视觉上“突破”其容器。例如，对话框、悬停卡和工具提示。