如何阻止 Material-UI 工具提示隐藏在相邻的祖先元素下？

Question

我的 DOM 是这样的：

wrapper
-element-container
--element (many)
---iconButton

每当 anelement靠近 的边界时element-container，tooltip渲染就会在 的边界处被截断element-container。

如何确保tooltips始终出现在顶部？

这是我当前的内联样式：

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'
      },

我试过了：

• 设置zIndex两者的tooltip（通过tooltipStylepropIconButton
• 将每个元素的更改position为不同的值（因为此问题表明会position影响zIndex）
• 使用MUI 源代码tooltipStyle中的默认值覆盖整个内容style

ETA：这是我所描述的问题的屏幕截图。我的屏幕截图应用程序无法捕获指针，因此我绘制了一个来指示鼠标位于灰色圆形按钮上。

截断工具提示是带有可见字母“ing”的黑框。虽然这张图片显示容器左侧被切断，但所有侧面的行为都是相同的。