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

Question

我有一个模态的工具提示。

有没有办法可以避免工具提示被包含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>

Answer 1

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

因为您的工具提示弹出窗口（悬停状态）是绝对定位的，nearest positioned ancestor是工具提示触发器本身（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>