具有绝对定位的工具提示元素被容器裁剪并溢出:自动 [英] Tooltip element with absolute positioning being clipped by container with overflow: auto

问题描述

我在模态中有一个工具提示.

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

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

body {边距:0；}.容器 {显示:弹性；高度:100vh；对齐项目:居中；对齐内容:居中；}.modal-dialog {显示:块；高度:50%；宽度:50%；背景:青色；边框:1px 实心；溢出:自动；}.工具提示{位置:相对；红色;文字装饰:下划线；}.tooltip::after {显示:无；内容:'你好';位置:绝对；左:-100%；顶部:-100%；高度:20px；宽度:60px；}.tooltip:hover::after {显示:内联块；背景:黑色；白颜色;}

<div class="modal-dialog"><span class="tooltip">工具提示</span>Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！

解决方案

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

因为您的工具提示弹出窗口(悬停状态)是绝对定位的，并且 最近定位的祖先是工具提示触发器本身(position:relative)，这个触发器在容器内，overflow: auto，没有办法在容器外显示弹出窗口.

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

body {边距:0；}.容器 {显示:弹性；高度:100vh；对齐项目:居中；对齐内容:居中；位置:相对；/* 从 .tooltip 移到这里 */}.modal-dialog {显示:块；高度:50%；宽度:50%；背景:青色；边框:1px 实心；溢出:自动；}.工具提示{红色;文字装饰:下划线；}.tooltip::after {显示:无；内容:'你好';位置:绝对；左:15%；/* 根据需要调整 */顶部:15%；/* 根据需要调整 */高度:20px；宽度:60px；}.tooltip:hover::after {显示:内联块；背景:黑色；白颜色;}

<div class="modal-dialog"><span class="tooltip">工具提示</span>Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur！Ratione modi dicta totam vel dolore, consequuntur nulla, amet laboure odio voluptate！

I have a tooltip in a modal.

Is there a way that I can avoid the tooltip from being clipped by a container with overflow on it?

I need the modal-dialog to handle content overflow so I cannot remove the overflow: auto from it.

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>

解决方案

The overflow: auto rule will clip any content that overflows the container, as you have indicated. You would get a similar result with overflow: hidden.

Because your tooltip pop-up (hover state) is absolutely positioned, and the nearest positioned ancestor is the tooltip trigger itself (position: relative), and this trigger is within the container with overflow: auto, there's no way to show the pop-up outside the container.

What you can do is make the nearest positioned ancestor an element higher up in the DOM structure. Then the abspos pop-up will reference that element, as opposed to the element with the 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>

这篇关于具有绝对定位的工具提示元素被容器裁剪并溢出:自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！