工具提示在其容器外部不可见

Question

我有这个HTML代码：

<div class="side-tab">
    <div class="header">
        <!-- Header here -->
    </div>
    <div class="scrollable">
        <div class="side-container">
            <div id="item1" class="item">
                <!-- Here I have things of the item and button with tooltip on it -->
            </div>
            <div id="item2" class="item">
                <!-- Here I have things of the item and button with tooltip on it -->
            </div>
    </div>
</div>

每个班级的CSS都是这样的：

.side-tab {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.header {
    height: 30px;
    padding: 0 10px;
    align-items: center;
}

.scrollable {
    width: 450px;
    flex-grow: 1;
    overflow-y: scroll;
    direction: ltr;
    overflow-x: hidden;
    position: relative;
}

.side-container {
    width: 450px;
    padding 0 7px;
    direction: rtl;
    position: absolute;
    right: 0;
    padding-bottom: 500px;
}

.item {
    margin: 7px 0;
    bow-shadow: (something here);
    border-radius: 6px;
}

我在每个项目中都有一个带有工具提示的按钮。该按钮位于每个item的左侧。我遇到的问题是此工具提示在side-tab之外不可见。 它看起来像这样：

那个想要的结果是这样的：

Pink: other container.
Black: side-tab.
Red: header.
Orange: scrollable.
Green: side-container.
Blue: item.
Purple: button.
Gray: tooltip.

我明白问题在于overflow-x和overflow-y（当我删除它时它看起来很好但我不能滚动，我有一个带有按钮的页脚，工具提示和工具提示显示在＆＃39;其他容器＆＃39;）。 我检查了解决方案并找到了这个：CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

但是没有任何东西可以解决这个问题。我真的需要在没有太多变化的情况下解决它。

提前致谢并抱歉这个糟糕的例子和英语。