Bootstrap 4 Tooltip在窄滚动容器中的定位异常问题

我之前也碰到过一模一样的情况——窄滚动容器里的Tooltip总是不听话，明明设置了右侧显示，空间不够就自动乱跑。其实这是Bootstrap Tooltip默认的自适应定位逻辑在搞鬼，它会自动切换Tooltip位置来避免溢出，但这显然不符合咱们要固定右侧的需求。下面给你两个靠谱的修复方案：

方案一：强制固定右侧，允许Tooltip超出容器 #

直接禁用Bootstrap的自动翻转和溢出限制逻辑，让Tooltip不管容器空间够不够，都死死钉在元素右侧。

参考HTML结构 #

<div id="scroll-container" class="overflow-auto" style="width: 150px; height: 100px; border: 1px solid #ddd;">
  <button type="button" class="btn btn-secondary my-2" data-toggle="tooltip" title="这是一段较长的Tooltip内容，用来测试定位">
    悬浮查看Tooltip
  </button>
</div>

自定义Tooltip初始化配置 #

$(function() {
  $('[data-toggle="tooltip"]').tooltip({
    placement: 'right', // 基础定位设为右侧
    popperConfig: {
      modifiers: {
        flip: { enabled: false }, // 关闭自动翻转位置的功能
        preventOverflow: { enabled: false } // 关闭防止溢出的限制，允许Tooltip超出容器
      }
    }
  });
});

方案二：优先右侧显示，以视口为边界（推荐） #

如果不想Tooltip完全不受限制溢出视口，可以把溢出边界从父容器改成整个浏览器视口，这样只有当右侧超出视口时才会调整，而不是父容器不够宽就乱跑。

修改后的JS配置：

$(function() {
  $('[data-toggle="tooltip"]').tooltip({
    placement: 'right',
    popperConfig: {
      modifiers: {
        flip: { enabled: false }, // 依然禁用自动翻转，确保优先右侧
        preventOverflow: {
          boundariesElement: 'viewport' // 把溢出检测的边界换成视口
        }
      }
    }
  });
});

额外优化提示 #

如果Tooltip内容太长导致显示不全，可以给Tooltip加个自定义样式换行：

.tooltip-inner {
  white-space: normal;
  max-width: 200px; /* 按需设置最大宽度 */
}

这样调整后，不管你的滚动容器有多窄，Tooltip都会乖乖显示在元素右侧啦～

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