如何使绝对定位的工具提示重叠可滚动容器？

问题描述

我有一个带有元素的可滚动容器。对于每个元素，我希望工具提示相对于元素定位。我希望工具提示与容器重叠。

问题是当工具提示显示在容器边缘附近时，它会扩大容器内部的空间。我想让工具提示与容器重叠。我怎样才能做到这一点？

示例： https://codepen.io/tys404/pen/gOLNJXZ

.container {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  overflow: scroll;
}

.relative {
  position: relative;
}

.absolute {
  left: 20px;
  border: 3px solid pink;
  position: absolute;
}

<div class="container">
  <div class="relative">
    <div class="txt"> blabla </div>
    <div class="absolute"> tooooooltip </div>
  </div>
</div>

解决方法

我将工具提示的位置更改为 fixed 并将 x 矩形的 y 和 div 位置指定为工具提示样式

absolute html tooltip