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

问题描述

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

有一种方法，我可以避免工具提示被一个容器裁剪与溢出

我需要模态对话框处理内容溢出，所以我不能删除 overflow：auto 。

  body {margin：0; } .container {display：flex;高度：100vh; align-items：center; justify-content：center;}。modal-dialog {display：block;身高：50％; width：50％;背景：青色; border：1px solid; overflow：auto;}。tooltip {position：relative;红色; text-decoration：underline;}。tooltip :: after {display：none; content：'Hello'; position：absolute;左：-100％; top：-100％; height：20px; width：60px;}。tooltip：hover :: after {display：inline-block;背景：黑色; color：white;}  

 < div class = > < div class =modal-dialog> < span class =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，henceuntur 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;}。高度：100vh; align-items：center; justify-content：center;位置：相对; / * from this.tooltip * /}。modal-dialog {display：block;身高：50％; width：50％;背景：青色; border：1px solid; overflow：auto;}。tooltip {color：red; text-decoration：underline;}。tooltip :: after {display：none; content：'Hello'; position：absolute;左：15％; / *根据需要调整* / top：15％; / *根据需要调整* / height：20px; width：60px;}。tooltip：hover :: after {display：inline-block;背景：黑色; color：white;}  

 < div class = > < div class =modal-dialog> < span class =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，henceuntur 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>  

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 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屋！