Обрезка React-Tooltip

Итак, я пытаюсь понять, как я могу решить здесь свою дилемму.

Итак, проблема, с которой я столкнулся, заключается в том, что если я помещу всплывающую подсказку React в элемент 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, но мне нужно overflow: visible. Я понятия не имею, как это изменить.