css - 如何使工具提示在使用 css 溢出隐藏的容器中可见？

Question

我有一个工具提示，显示用户何时将按钮悬停在对话框中。这些按钮包含在 ToolTip 组件中，而 ToolTip 组件位于 UsersContainer div 中。

下面是我的代码，

wrapper {
  position: absolute;
  bottom: 32px;
  width: 316px;
  min-height: 225px;
  background-color: yellow;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}

des_container {
  padding: 16px 6px 16px 22px;
  margin: 0px -6px 0px -6px;
}

UsersContainer {
  padding: 14px;
  height: 104px;
  width: 316px;
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: auto;
  &>div {
    margin: 2px;
  }
}

tooltip_wrapper {
  position: relative;
  z-index: 1000;
}

inner_wrapper {
  position: absolute;
  width: auto;
}

tooltip_text {
  position: relative;
  display: flex;
  flex-direction: column;
}

<div class="wrapper">
  <div class="des_container">
    <span>title</span>
    <span>description</span>
  </div>
  <div class="UsersContainer">
    <div class="tooltip_wrapper">
      <div class="inner_wrapper">
        <div class="tooltip_text">
          <span>text</span>
        </div>
      </div>
    </div>
  </div>
</div>

现在的问题是工具提示隐藏在 UsersContainer div 后面，因为此 UsersContainer div 具有 overflow-x: hidden 和 overflow-y: auto 属性。当我删除这些属性时，工具提示位于第一行按钮的 UsersContainer div 上方，并且不再被裁剪。

有人可以帮我解决这个问题吗？我尝试在 ToolTipWrapper div 上使用绝对位置，这使得工具提示按预期显示在上方，但 UsersContainer div 中的按钮似乎相互重叠。

我不知道如何解决这个问题。谢谢。

标签： css