具有絕對定位的工具提示元素被溢出的容器剪切：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結果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>