twitter-bootstrap – 当页面向下滚动时,引导程序工具提示svg元

我对svg元素的Bootstrap(3.3.7)工具提示有问题.当页面滚动到顶部时,工具提示工作正常.但每当我向下滚动页面时,工具提示都有错误的垂直位置(我向下滚动页面越多,tootltip和tooltiped元素之间的距离就越大).

这是一个提到问题的基本示例(还有带工具提示的测试按钮,它运行良好)：

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','title': 'Example tooltip.'
    });
});

见工作jsfiddle.

有人可以帮助我或让某人有同样的问题吗？我为工具提示尝试了很多选项,但我无法解决问题.