React-Tooltip clipping

Question

So I'm trying to figure out how I can solve my dilemma here.

So the problem I am facing is if I place the React-tooltip in the List element it will be clipped. If I place the React-Toolip at the bottom it has no effect (which is logical since it doesn't know what index is outside of the map. So I am kinda stuck here trying to figure out how to prevent the clipping. I have tried setting the z-index to no avail. I feel like the placement for the React-Tooltip and/or combined with styles would fix this. I feel like the answer is right is not complicated but I am unable to get this to cooperate. Thanks in advance.

Here is what the code looks like:

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;
  }
};

EDIT:

Ok so I kinda see what is blocking it but do not know the fix for this.

These two elements have overflowY: auto but I need overflow: visible. I have no clue how to change this.

Answer 1

Provide a className inside,

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

And in your css file, or what ever styling methods(sass or styled components), you can add your style for this class,

.reacttooltip {
  overflow: visible;
}

Answer 2

If you use React, try React Portals .

A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs, hovercards, and tooltips.