工具提示需要溢出:自动容器而不被切断[重复]

Posted

技术标签:

【中文标题】工具提示需要溢出:自动容器而不被切断[重复]【英文标题】:Tooltip needs to be in overflow: auto container without being cut off [duplicate] 【发布时间】:2017-03-02 03:30:35 【问题描述】:

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

【问题讨论】:

【参考方案1】:

找到解决方案here。

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

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

【讨论】:

以上是关于工具提示需要溢出:自动容器而不被切断[重复]的主要内容,如果未能解决你的问题,请参考以下文章

具有绝对定位的工具提示元素被具有溢出的容器剪切:自动

[SVG样式缩放样式而不被切断

Flexbox对齐项目溢出文本在顶部被切断[重复]

如何保存整个图表而不被切断? [复制]

适合容器而不溢出身体

溢出:使用 Flexbox 自动导致垂直居中的项目被切断