How do I stop Material-UI tooltips from hiding under adjacent ancestor elements?
<p>My DOM is something like this:</p>

<pre><code>wrapper
-element-container
--element (many)
---iconButton
</code></pre>

<p>Whenever an <code>element</code> is near the border of the <code>element-container</code>, the <code>tooltip</code> render is cut-off at the bounds of <code>element-container</code>. </p>

<p>How can I ensure <code>tooltips</code> always appear on top?  </p>

<p>Here my current in-line styles:</p>

<pre><code>element-container: {
        paddingTop: '15px',
        height: '65vh',
        overflowY: 'scroll',
      },
element: {
        border: this.props.isSelected ? '4px solid #E71E61' : 'none',
        boxSizing: 'content-box',
        width: '300px',
        transition: 'width 1.5s',
        height: '500px',
        margin: '15px',
        position: 'relative',
      },
iconButton: {
        position: 'absolute',
        marginTop: '-30px',
        marginLeft: '-30px',
        transform: this.state.isMouseOver === true ? 'scale(1,1)' : 'scale(0,0)',
        transition: 'all .2s',
      },
icon: {
        height: '40px',
        width: '40px'
      },
</code></pre>

<p>I've tried:</p>

<ul>
<li>setting the <code>zIndex</code> of both the <code>tooltip</code> (via the <code>tooltipStyle</code> prop of <code>IconButton</code></li>
<li>changing the <code>position</code> of each element to different values (since <a href="https://github.com/callemall/material-ui/issues/210" rel="nofollow noreferrer">this issue</a> indicates <code>position</code> affects <code>zIndex</code>)</li>
<li>overwrting the entire <code>tooltipStyle</code> with the default <code>style</code> found in the <a href="https://github.com/callemall/material-ui/blob/master/src/internal/Tooltip.js" rel="nofollow noreferrer">MUI source code</a></li>
</ul>

<p>ETA: Here's a screen shot of the issue I'm describing. My screenshot app doesn't capture the pointer, so I've drawn one to indicate that the mouse is over the grey circle button.</p>

<p><a href="https://i.stack.imgur.com/tCa1D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tCa1D.png" alt="description of tooltip issue"></a></p>

<p>The cut-off tooltip is the dark box with the letters 'ing' visible. While this pic shows cut-off on the left side of the container, all sides behave the same.</p>