Bootstrap Tooltip在含overflow-y:scroll容器中闪烁错位求助

我明白你遇到的Bootstrap Tooltip闪烁难题——当容器设置了overflow-y:scroll时，确实会触发这种诡异的反复闪烁现象，哪怕和fullcalendar搭配使用，核心问题还是出在滚动容器和Tooltip的位置计算冲突上。下面给你几个可行的解决方案，都能保留滚动属性的同时解决闪烁问题：

• 方案一：将Tooltip挂载到body（最推荐）
  默认情况下，Bootstrap Tooltip会被插入到触发元素的父容器中，而当父容器有overflow-y:scroll时，Tooltip的位置计算会因为容器滚动反复触发重绘，导致闪烁。我们可以通过修改Tooltip的挂载容器，让它脱离滚动容器：

  // 初始化Tooltip时指定container选项为body
  $('[data-toggle="tooltip"]').tooltip({
    container: 'body'
  });
  

  这样Tooltip会被直接插入到<body>标签下，完全不受滚动容器的overflow属性影响，位置计算也不会频繁触发，闪烁问题就能直接解决。

• 方案二：给Tooltip添加固定定位样式
  如果因为某些原因不能将Tooltip挂载到body，可以尝试强制Tooltip使用固定定位，避免被滚动容器的溢出规则干扰：

  .tooltip {
    position: fixed !important;
  }
  

  注意：这个方法可能需要额外调整Tooltip的偏移参数（比如offset选项），确保它能正确显示在目标元素附近。

• 方案三：禁用Tooltip的滚动重定位事件
  Bootstrap Tooltip默认会监听容器的滚动事件，实时重计算位置，这在滚动容器里会导致频繁重绘引发闪烁。我们可以手动移除这个监听事件：

  $('[data-toggle="tooltip"]').tooltip({
    // 保留你需要的其他配置，比如placement、trigger等
    placement: 'top',
    trigger: 'hover focus'
  }).off('scroll.bs.tooltip'); // 移除滚动时的重定位监听
  

  这个方法会阻止Tooltip在容器滚动时重新调整位置，只要你的Tooltip位置不需要随滚动动态变化，就能有效解决闪烁。

以上三个方案里，方案一的适用性最广，实现起来也最简单，优先推荐尝试。

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