I have problem with Bootstrap (3.3.7) tooltips for svg elements. Tooltips working well when page is scrolled to the top. But whenever i scroll page down, tooltips have wrong vertical position (the more i scroll down the page, the distance between tootltip and tooltiped element is larger).
Here is a basic example with mentioned problem (there is also test button with tooltip which working well):
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.'
});
});
See working jsfiddle .
Can someone help me or have someone the same problem? I tried many options for tooltip but I'm not able to solve the problem.