我在模态中有一个工具提示。
是否有一种方法，我可以避免工具提示被与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>overflow: auto规则将裁剪溢出容器的任何内容，正如您所指示的那样。对于overflow: hidden，您将得到类似的结果。
因为你的工具提示弹出(悬停状态)是绝对定位的，而最近定位的祖先是工具提示触发器本身(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>