解决overflow容器内tooltip随滚动偏移问题（Tailwind实现）

核心问题 #

你的Tooltip是基于外层relative容器做绝对定位的，而列表项是默认的static定位——滚动时列表项在容器内移动，但Tooltip的定位基准没跟着变，自然会出现位置偏移。

直接修复方案（最省心） #

把每个列表项设为relative，让Tooltip以列表项为定位基准，同时调整容器的溢出规则避免Tooltip被截断：

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-screen items-center justify-center">
  <div class="relative">
    <!-- 移除overflow-x-hidden，防止Tooltip被容器截断 -->
    <ul class="h-24 w-24 space-y-3 overflow-y-auto rounded-md border bg-gray-100 py-2 px-4">
      <!-- 将static改为relative，作为Tooltip的定位基准 -->
      <li class="group relative cursor-pointer">
        Item 1
        <div class="invisible absolute z-10 group-hover:visible">
          <!-- 用left-full+ml-2实现列表项右侧的定位，mt-[-0.75rem]垂直居中 -->
          <p class="left-full ml-2 mt-[-0.75rem] w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 1</p>
        </div>
      </li>

      <li class="group relative cursor-pointer">
        Item 2
        <div class="invisible absolute z-10 group-hover:visible">
          <p class="left-full ml-2 mt-[-0.75rem] w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 2</p>
        </div>
      </li>

      <li class="group relative cursor-pointer">
        Item 3
        <div class="invisible absolute z-10 group-hover:visible">
          <p class="left-full ml-2 mt-[-0.75rem] w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 3</p>
        </div>
      </li>

      <li class="group relative cursor-pointer">
        Item 4
        <div class="invisible absolute z-10 group-hover:visible">
          <p class="left-full ml-2 mt-[-0.75rem] w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 4</p>
        </div>
      </li>
    </ul>
  </div>
</div>

进阶灵活方案（适合复杂场景） #

如果不想修改列表项的定位属性，或者需要更精细的位置控制，可以用CSS变量配合少量JS实现动态定位：

• 监听滚动容器的scroll事件，实时计算每个列表项的滚动偏移量
• 将偏移量赋值给对应列表项的CSS变量，Tooltip通过变量调整自身位置

这种方案适合需要Tooltip做特殊动画、或者列表项结构复杂的场景，但需要额外的JS逻辑支持。

关键调整说明 #

• 定位基准切换：列表项设为relative后，Tooltip的绝对定位会以列表项为参考，滚动时自然同步移动
• 溢出规则调整：移除容器的overflow-x-hidden，保证Tooltip能在容器外侧完整显示
• 定位值优化：用left-full代替固定的ml-14，适配不同宽度的列表项，避免硬编码导致的错位

内容的提问来源于stack exchange，提问作者PW_Parsons