Tooltip 需要在 overflow: auto container 不被切断

Question

我正在构建一种桌面应用程序。页面本身不能滚动，但其中的不同内容部分可以滚动。因此，他们有overflow: auto。

但现在我需要显示工具提示，因此它们在容器边缘被切断。

我发现所有关于此的其他问题的答案都建议不要剪辑溢出（隐藏、自动、滚动），但不幸的是，这对我来说不是一个选项。

并且由于我无法确定我的容器和工具提示的高度，因为它们都是从外部获取数据的，所以我无法将工具提示放在它的中间并确保它不会被切断。

所以我需要一个不会切断工具提示的解决方案。

我的基本标记的工作示例：

#flex {
  display: flex;
  flex-direction: column;
  height: 200px;
  width: 100%;
}
#box1,
#box2 {
  flex 1;
  overflow-y: auto; /* without overflow the tooltip would work, but I need overflow */
}
#box1 {
  background-color: lightgrey;
}
#box2 {
  background-color: lightblue;
}
span {
  position: relative;
  text-decoration: underline;
}
#tooltip {
  background-color: lightgreen;
  display: none;
  position: absolute;
  height: 100px;
  width: 200px;
  bottom: 0px;
}
span:hover #tooltip {
  display: block;
}

<div id="flex">
  <div id="box1">
    Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>
  </div>
  <div id="box2">
    Flex Content with <span>Tooltip
    <div id="tooltip">
    Tooltip text
    </div></span>
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>
  </div>
</div>

https://jsfiddle.net/dqrkkvkL/

Answer 1

找到解决方案 here。

他们只是将 position: relative 从包含工具提示的元素移动到围绕溢出元素的容器

https://jsfiddle.net/dqrkkvkL/1/

Tooltip 需要在 overflow: auto container 不被切断

Tooltip needs to be in overflow: auto container without being cut off

css

overflow

tooltip

flexbox