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

Posted 2023-03-05

【中文标题】具有绝对定位的工具提示元素被具有溢出的容器剪切：自动

【英文标题】：Tooltip element with absolute positioning being clipped by container with overflow: auto

【发布时间】：2017-02-26 20:54:42

【问题描述】：

我在模式中有一个工具提示。

有没有办法可以避免工具提示被带有overflow 的容器剪切？

我需要模态对话框来处理内容溢出，因此我无法从中删除 overflow: auto。

body 
  margin: 0;


.container 
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;


.modal-dialog 
  display: block;
  height: 50%;
  width: 50%;
  background: cyan;
  border: 1px solid;
  overflow: auto;


.tooltip 
  position: relative;
  color: red;
  text-decoration: underline;


.tooltip::after 
  display: none;
  content: 'Hello';
  position: absolute;
  left: -100%;
  top: -100%;
  height: 20px;
  width: 60px;


.tooltip:hover::after 
  display: inline-block;
  background: black;
  color: white;

<div class="container">
  <div class="modal-dialog">
    <span class="tooltip">Tooltip</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
  </div>
</div>

【问题讨论】：

你不能用data-toggle="tooltip" title="your text"吗？

【参考方案1】：

overflow: auto 规则将剪切任何溢出容器的内容，如您所指出的。 overflow: hidden 会得到类似的结果。

因为你的tooltip弹窗（悬停状态）是绝对定位的，而nearest positioned ancestor是tooltip触发器本身（position: relative），而这个触发器是在overflow: auto的容器内，所以没办法显示容器外的弹窗。

您可以做的是使最近的定位祖先元素成为 DOM 结构中更高的元素。然后 abspos 弹出窗口将引用该元素，而不是带有 overflow 的元素。

body 
  margin: 0;


.container 
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  position: relative;    /* moved here from .tooltip  */


.modal-dialog 
  display: block;
  height: 50%;
  width: 50%;
  background: cyan;
  border: 1px solid;
  overflow: auto;


.tooltip 
  color: red;
  text-decoration: underline;


.tooltip::after 
  display: none;
  content: 'Hello';
  position: absolute;
  left: 15%;            /* adjust as necessary */
  top: 15%;             /* adjust as necessary */
  height: 20px;
  width: 60px;


.tooltip:hover::after 
  display: inline-block;
  background: black;
  color: white;

<div class="container">
  <div class="modal-dialog">
    <span class="tooltip">Tooltip</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
  </div>
</div>

【讨论】：

这种解决方案有效，但仅适用于这种情况。工具提示是一个可重复使用的组件，我无法在每种情况下根据需要定位它。这也没有响应，事情开始破裂。经过大量研究后我发现这是不可能的，因为溢出的方式：自动工作。

我发现这个解决方案运行良好（答案来自我拥有的实时站点）。要使其具有响应性，只需调整媒体查询中的偏移属性即可。

但是如果我们在那个容器中有多个工具提示怎么办。我们将不得不设置不同的值来定位它们中的每一个。如果工具提示有方向怎么办，那么我们需要为每个工具提示的每个方向单独定位。我同意它适用于这种情况，但它不可扩展。

你是对的。这不是一个很好的解决方案。这是一个丑陋的黑客。但是您在第一条评论中说这只是“不可能”。我的观点是：如果它真的很重要，那么它可以完成（使用纯 CSS）。

是的。如果有人真的需要这个，这是可能的。我一定会支持您的回答，并感谢您的帮助！