Bootstrap5.x+Popper JS实现Tooltip随元素固定不偏移方案问询

滚动条出现时Tooltip偏移，核心原因是Popper的定位上下文没绑定到正确容器，或者默认边界计算没排除滚动条宽度的干扰。以下是经过验证的可运行方案：

完整示例代码 #

HTML + CSS + JS #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tooltip 滚动跟随示例</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 模拟带滚动条的容器 */
    .scroll-box {
      height: 400px;
      overflow-y: auto;
      border: 1px solid #eee;
      padding: 20px;
      margin: 20px 0;
      /* 关键：允许Tooltip超出容器，避免被裁剪 */
      overflow: visible;
    }
    /* 长内容占位，触发滚动条 */
    .dummy-content {
      height: 800px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h3>滚动容器内的Tooltip测试</h3>
    <div class="scroll-box">
      <div class="dummy-content">
        <!-- 按钮Tooltip -->
        <button class="btn btn-primary mt-5" data-bs-toggle="tooltip" title="顶部悬浮提示">顶部Tooltip</button>
        
        <!-- 文本Tooltip -->
        <span class="d-block mt-3" data-bs-toggle="tooltip" data-bs-placement="right" title="右侧悬浮提示">悬停看右侧Tooltip</span>
        
        <!-- 标签Tooltip -->
        <span class="badge bg-info mt-3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="底部悬浮提示">底部Tooltip</span>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
  <script>
    // 初始化Tooltip，重点看配置项
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
      new bootstrap.Tooltip(el, {
        container: 'body', // 把Tooltip挂载到body，脱离滚动容器约束
        boundary: 'viewport', // 以视口为边界，避免被容器滚动条干扰
        popperConfig: {
          strategy: 'fixed', // 固定定位，滚动时自动跟随目标元素
          modifiers: [
            {
              name: 'offset',
              options: {
                offset: [0, 6], // 调整Tooltip和目标元素的间距，按需修改
              }
            },
            {
              name: 'preventOverflow',
              options: {
                rootBoundary: 'viewport' // 确保Tooltip不会超出视口
              }
            }
          ]
        }
      })
    })
  </script>
</body>
</html>

核心配置解释 #

• container: 'body'：把Tooltip的DOM节点移到<body>下，彻底脱离原滚动容器的overflow规则，不会被容器裁剪，也不会受容器滚动时的布局偏移影响。
• popperConfig.strategy: 'fixed'：使用固定定位策略，Popper会基于视口计算Tooltip位置，页面滚动时会自动跟随目标元素，不会出现偏移。
• boundary 和 rootBoundary：都设为viewport，确保Tooltip的边界检测以整个视口为基准，排除滚动容器的滚动条宽度干扰。
• 滚动容器的overflow: visible：如果需要Tooltip显示在滚动容器外部，必须开启这个属性，否则Tooltip会被容器裁剪。

排查要点 #

1. 目标元素定位：不要给目标元素加position: fixed，否则和Tooltip的fixed策略冲突，改用position: relative。
2. 版本兼容性：确保Popper.js版本是2.11.x以上，和Bootstrap 5.3.x匹配。
3. 自定义CSS冲突：如果页面有修改body或滚动容器的padding/margin，要确保这些样式不会影响Tooltip的定位计算。

内容的提问来源于stack exchange，提问作者Rob K.