ページがスクロールダウンされたときのブートストラップツールチップのsvg要素の位置が正しくない

Question

ブートストラップ（3.3.7）ツールチップsvg要素に問題があります。ページが上にスクロールされたときにうまく機能するツールチップ。しかし、私がページをスクロールするたびに、ツールチップの垂直位置が間違っています（ページをスクロールするほど、ツールチップとツールチップの間の距離が大きくなります）。ここで

は（うまく機能ツールチップでテストボタンもある）ような問題の基本的な例です。

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

まったく同じ厄介なバグが発生しましたが、解決策を見つけることができませんでした。 しかし、私にとってもっと妥当と思われたのは、を通常のHTML要素、例えば<div>でラップして、その<div>にツールチップを設定することでこのバグを回避することです。

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

Answer 2

ブートストラップ3.3.5では、これはまだ動作しています。

Change JS resource to https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

https://jsfiddle.net/gabel/crnjrdbo/5/