如何修复滚动内容时由 SVG 触发的 Bootstrap 工具提示的不正确偏移？答案

【问题标题】：How to fix incorrect offset of Bootstrap tooltip triggered by SVG when content is scrolled?如何修复滚动内容时由 SVG 触发的 Bootstrap 工具提示的不正确偏移？
【发布时间】：2026-01-21 11:50:01
【问题描述】：

我有一个 SVG。这很简单。我希望它触发工具提示。确实如此。但是，当内容很多并且滚动页面时，提示的偏移量是不正确的。

这是fiddle。

要重现该问题，请稍微滚动并单击粉红色圆圈以打开工具提示。之后，点击粗体文字，看看区别。

看起来计算的偏移量没有考虑滚动高度。我尝试添加：

position: relative;

到整个页面的各种元素，包括body，它是工具提示的容器。我还尝试使用不同的元素作为触发器。没有任何效果。但是，如果触发元素不在内部并且<svg>，则一切正常。

导致此问题的原因以及如何解决？

【问题讨论】：

您找到解决问题的方法了吗？
不。最终没有工具提示。此问题存在于 Bootstrap 存储库中，但为 closed and marked as "won't fix"。
我包装 svg 的解决方案没有帮助吗？找出为什么 Bootstrap 不喜欢这种方式的 svgs 会很有趣..
这是一个很好的解决方法，但前提是工具提示需要粘贴到 SVG 上。就我而言，我需要在其内部的各个点上显示工具提示。老实说，我看不出有任何其他方法可以让它更好地工作。
啊，好吧，我想你可以抵消它们，但你最终会得到很多神奇的数字。

标签： javascript css twitter-bootstrap svg twitter-bootstrap-3

【解决方案1】：

用内联 div 包装 SVG，然后在其上调用工具提示：

HTML：

<div class="svg-wrap" data-toggle="tooltip" data-container="body" title="This tooltip doesn't work right.">
  <svg width="100px" height="100px" viewBox="0 0 100 100">
    <g>
      <circle fill="#fac" cx="50" cy="50" r="40" />
    </g>
  </svg>
</div>

CSS：

.svg-wrap {
  position: relative;
  display: inline-block;
}

小提琴： http://jsfiddle.net/hhsc1a4q/3/

【讨论】：