如何在滚动内容时修复由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/