向下滚动页面时，bootstrap工具提示在svg元素上的位置错误

Question

我对svg elements的 Bootstrap（3.3.7）工具提示有疑问。当页面滚动到顶部时，工具提示会正常工作。但是每当我向下滚动页面时，工具提示的垂直位置就会错误（我向下滚动页面的次数越多，tootltip和工具提示的元素之间的距离就越大）。

这是一个提到的问题的基本示例（还有带有工具提示的测试按钮也可以正常工作）：

HTML：

<div class="text-center">
  <div class="top-wrap"></div>
  <div class="svg-wrap">
    <svg height="100" width="100">
      <circle id="svg-el" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
      Sorry, your browser does not support inline SVG.  
    </svg> 
  </div>

  <button id="test-button" type="button" class="btn btn-default">Tooltip on left</button>
</div>

jQuery的：

$(function(){
    $('#svg-el').tooltip({
        'container': '.svg-wrap',
        'placement': 'top',
        'html':'true',
        'title': '<strong class="text-uppercase">France</strong><br/> example html content.'
    });
  $('#test-button').tooltip({
        'container': 'body',
        'placement': 'top',
        'title': 'Example tooltip.'
    });
});

参见工作jsfiddle。

有人可以帮我还是遇到同样的问题？我为工具提示尝试了许多选项，但无法解决问题。

Answer 1

要详细说明@gabel的答案，以修复引导程序v3.3.7，

• 转到https://github.com/twbs/bootstrap/blob/v3.3.7/js/tooltip.js

• 查找Tooltip.getPosition的声明： Tooltip.prototype.getPosition = function ($element) {

• 令人反感的行是： var isSvg = window.SVGElement && el instanceof window.SVGElement 和 var elOffset = isBody ? { top: 0, left: 0 } : (isSvg ? null : $element.offset())

如您所见，SVG故意禁用了定位。因此，通过将其强制设置isSvg为false来启用它：var isSvg = false

如果您使用的是简化版的bootstrap，则也可以通过查找getPosition的原型声明来进行搜索和替换，这相对容易。该isSvg变量是模糊的，但也应该在附近。