css – 工具提示需要溢出：自动容器没有被切断

2023年6月10日 290次阅读

参见英文答案 >
Tooltip element with absolute positioning being clipped by container with overflow: auto                                    1个

我正在构建一个桌面应用程序.页面本身不能滚动,但其中的不同内容部分可以滚动.因此,它们有溢出：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/

最佳答案 解决方案找到
here.

它们只是移动位置：相对于包含工具提示的元素到包围溢出元素的容器

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

点赞