模态框内Bootstrap Tooltip滚动跟随及定位异常解决方案咨询

出现这个问题的核心原因是：Bootstrap Tooltip默认会将生成的提示元素插入到<body>标签下，而非绑定在触发元素所在的模态框/网格容器内。当网格滚动时，Tooltip的定位基准是整个页面，而非滚动的容器，因此会跟着滚动条偏移。

可以通过以下两种方法解决：

方法一：指定Tooltip的容器 #

初始化Tooltip时，通过container选项将提示元素插入到模态框或网格的父容器中，让Tooltip的定位基准与滚动容器一致。

示例代码：

// 替换#your-modal-id为你的模态框ID，或者网格的父容器选择器
$('th[data-title]').tooltip({
  container: '#your-modal-id',
  placement: 'top' // 可按需调整提示位置
});

方法二：监听滚动事件更新Tooltip位置 #

如果无法修改容器设置，可监听网格容器的滚动事件，每次滚动时强制Tooltip重新计算位置。

示例代码：

// 替换.grid-container为你的网格容器选择器
$('.grid-container').on('scroll', function() {
  // 更新当前显示的所有Tooltip
  $('[data-title].tooltip-show').tooltip('update');
});

针对你的表头元素的注意点 #

你的<th>标签使用了data-title属性，确保初始化Tooltip时选择器正确匹配该元素，避免遗漏绑定。

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