工具提示不显示在 (overflow-y: auto) 容器之外

Question

我有一个包含大量数据的容器框，并且由于页面上的高度有限，因此需要在此容器上自动滚动溢出-y。
在这个容器内，一些元素有工具提示。工具提示当然会在悬停时显示，并且必须是 position: absolute。
我的问题是自overflow-y: auto 以来，工具提示不会显示在父容器之外。

是否有解决此问题的方法？我没有找到解决这个问题的其他问题。

代码：

.box {
  padding: 2rem;
  background-color: #e4e4e4;
  border-radius: 0.5rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 10rem;
  height: 10rem;
  overflow-y: auto;
}

.tooltip {
  position: relative;
}

.tooltip-text {
  pointer-events: none;
  color: white;
  width: 15rem;
  padding: 0.5rem 1rem;
  background-color: #2e2e2e;
  border-radius: 0.5rem;
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: 500ms;
}

.tooltip:hover .tooltip-text {
  opacity: 1;
}

<div class="box">
  <div class="tooltip">
    <div class="tooltip-text">I am an idiot, and this is a long text to demonstrate it.</div>
    <p class="text">Hover here!</p>
  </div>
  <p class="text">Some data here.</p>
  <p class="text">Some data here.</p>
  <p class="text">Some data here.</p>
  <p class="text">Some data here.</p>
  <p class="text">Some data here.</p>
  <p class="text">Some data here.</p>
  <p class="text">Some data here.</p>
  <p class="text">Some data here.</p>
  <p class="text">Some data here.</p>
</div>

JS 小提琴：https://jsfiddle.net/8tfbh5aj/9/

Answer 1

制作一个容器并将.box 和.tooltip 作为兄弟姐妹放入其中：

.container -   
         .box    
         .tooltip

如果父级被溢出隐藏，则子级不会隐藏在视图之外。所以最好将它们分开并将它们与一个主容器相关联

main {
        position: relative;
        width: 200px;
        height: 150px;
      }
      section {
        background: #e9e9e9;
        position: absolute;
        inset: 0;
        border-radius: 10px;
        display: grid;
        place-items: center;
        overflow: scroll;
      }
      div {
        position: absolute;
        opacity: 0;
        bottom: -10%;
        left: 50%;
        padding: 5px 10px;
        transform: translateX(-50%);
        min-width: 100%;
        border-radius: 10px;
        background: black;
        color: white;
      }
      section:hover ~ div,
      div:hover {
        opacity: 1;
      }

<main>
      <section>
        <p>Hover here</p>
      </section>
      <div>
        <p>this is a long text to demonstrate it</p>
      </div>
    </main>