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

Question

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

---

这是一个fiddle .

要重现该问题，请滚动一点并单击粉红色圆圈以打开工具提示。之后，单击粗体 文本并查看差异。

---

看起来计算出的偏移量并未考虑滚动高度。我尝试添加:

position: relative;

页面上的各种元素，包括 body ，这是工具提示的容器。我还尝试为触发器使用不同的元素。什么都不管用。但是，如果触发元素不在内部并且 <svg> ，一切正常。

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

Answer 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;
}

fiddle : http://jsfiddle.net/hhsc1a4q/3/