Scrollable div顶部Tooltip被截断求助：如何保留滚动并显示顶部溢出

这个问题确实很常见——当父容器设置了overflow: scroll时，任何超出容器边界的子元素（包括绝对定位的Tooltip）都会被裁剪掉。要保留滚动功能同时让Tooltip完整显示，有几个靠谱的方案，我给你拆解一下：

方案1：利用CSS Popover API（推荐，现代浏览器支持） #

现在主流浏览器都支持原生的Popover API了，这是最简单的解决方式。你只需要给Tooltip元素加上popover="auto"属性，它就会自动脱离父容器的裁剪，在页面顶层显示：

<div class="scroll-container" style="overflow: scroll; height: 300px;">
  <div class="item" onmouseover="document.getElementById('tooltip1').show()" onmouseout="document.getElementById('tooltip1').hide()">
    顶部元素
    <div id="tooltip1" popover="auto" style="position: absolute; background: #333; color: white; padding: 8px;">
      这是完整的Tooltip内容
    </div>
  </div>
  <!-- 其他子元素 -->
</div>

这种方式不需要复杂的JS计算，浏览器会自动处理Tooltip的定位和层级，完全不会被滚动容器截断。

方案2：将Tooltip定位到滚动容器外部 #

如果需要兼容旧浏览器，可以把Tooltip放在滚动容器的外面，通过JavaScript计算鼠标悬停时的位置来动态定位：

<div class="scroll-container" style="overflow: scroll; height: 300px;" id="scrollContainer">
  <div class="item" onmouseover="showTooltip(event, '这是完整的Tooltip内容')" onmouseout="hideTooltip()">
    顶部元素
  </div>
  <!-- 其他子元素 -->
</div>
<div id="tooltip" style="position: absolute; background: #333; color: white; padding: 8px; display: none;"></div>

<script>
function showTooltip(event, content) {
  const tooltip = document.getElementById('tooltip');
  const rect = event.target.getBoundingClientRect();
  // 把Tooltip定位到元素上方，避免被容器截断
  tooltip.style.left = `${rect.left}px`;
  tooltip.style.top = `${rect.top - tooltip.offsetHeight}px`;
  tooltip.textContent = content;
  tooltip.style.display = 'block';
}

function hideTooltip() {
  document.getElementById('tooltip').style.display = 'none';
}
</script>

这样Tooltip属于body的子元素，完全不受滚动容器的overflow属性影响，自然不会被截断。

方案3：调整Tooltip的定位上下文（伪元素场景适用） #

如果你的Tooltip是通过子元素的伪元素（:before/:after）实现的，可以尝试让伪元素的定位上下文脱离滚动容器：给滚动容器的父元素设置position: relative，然后给伪元素设置position: absolute，同时通过z-index确保它在滚动容器上方。不过这种方式需要更精细的位置计算，不如前两种方案省心。

总结一下，最推荐的是方案1，用原生Popover API，代码最少，体验最好；如果要兼容旧浏览器，方案2是稳定的选择。

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