title: React-Tooltip clipping
body: <p>So I'm trying to figure out how I can solve my dilemma here.</p>
  
  <p>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.</p>
  
  <p>Here is what the code looks like:</p>
  
  <pre><code>const styles = {
    listContainer: {
      maxHeight: this.props.listMaxHeight ? this.props.listMaxHeight : '30vh',
      overflowY: 'auto',
      border: '.05vmin solid',
      borderColor: fullWhite,
    },
  };
  
  const commentCard = () =&gt; {
    if (typeof(data.md5hash) === 'string' &amp;&amp; data.md5hash.length &gt; 0) {
      return (
        &lt;div&gt;
          &lt;div style={styles.listContainer}&gt;
            &lt;List&gt;
              {comments.map((item, index) =&gt; (
                &lt;ListItem
                  id={index}
                  key={index}
                  leftAvatar={ &lt;Avatar src={item.avatar} /&gt;}
                  rightIconButton={
                    &lt;IconMenu
                      disableGutters={true}
                      iconButtonElement={
                        &lt;IconButton&gt;
                          &lt;MoreVertIcon color={grey400} /&gt;
                        &lt;/IconButton&gt;
                      }&gt;
                      &lt;MenuItem&gt;
                        &lt;IconButton
                          disabled={this.checkUserRights(index)}
                          onClick={() =&gt; this.editComment(index)}
                          data-tip='Edit'
                          data-for={`sf${index}`}&gt;
                          &lt;FontIcon className="far fa-edit" /&gt;
                        &lt;/IconButton&gt;
                      &lt;/MenuItem&gt;
                      &lt;MenuItem&gt;
                        &lt;IconButton
                          disabled={this.checkUserRights(index)}
                          onClick={() =&gt; this.deleteComment(index)}
                          data-tip='Delete'
                          data-for={`sf${index}`}&gt;
                          &lt;FontIcon className="far fa-trash-alt" /&gt;
                        &lt;/IconButton&gt;
                      &lt;/MenuItem&gt;
                      &lt;ReactTooltip
                        id={`sf${index}`}
                        place='left'
                      /&gt;
                    &lt;/IconMenu&gt;
                  }
                  primaryText={
                    // not relevant
                  }
                  secondaryText={
                    // not relevant
                  }
                /&gt;
              ))}
            &lt;/List&gt;
          &lt;/div&gt;
          &lt;div style={styles.actionsContainer}&gt;
            // this is a container for the comments text area and buttons
          &lt;/div&gt;
        &lt;/div&gt;);
    } else {
      return null;
    }
  };
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>Ok so I kinda see what is blocking it but do not know the fix for this.</p>
  
  <p><a href="https://i.stack.imgur.com/HF52z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HF52z.png" alt="Problem"></a></p>
  
  <p>These two elements have overflowY: auto but I need overflow: visible. I have no clue how to change this.</p>