Bootstrap tooltip неправильное положение на svg-элементе при прокрутке страницы

Question

У меня проблема с Bootstrap (3.3.7) всплывающие подсказки для svg elements. Всплывающие подсказки работают хорошо, когда страница прокручивается вверх. Но всякий раз, когда я прокручиваю страницу вниз, всплывающие подсказки имеют неправильное вертикальное положение (чем больше я прокручиваю страницу вниз, тем больше расстояние между 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', 
     'placement': 'top', 
     'title': 'Example tooltip.' 
    }); 
}); 

См работает jsfiddle ,

Может кто-нибудь помочь мне или у кого-то такая же проблема? Я пробовал много вариантов всплывающей подсказки, но я не могу решить проблему.

Answer 1

Я столкнулся с такой же досадной ошибкой и не нашел решения. Однако для меня было разумнее обойти эту ошибку, обернув ее <svg> с помощью обычного элемента 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

В Bootstrap 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/