Bootstrap tooltip wrong position on svg element when page is scrolled down

Question

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.

Answer 1

To elaborate on @gabel's answer, for fixing bootstrap v3.3.7,

• go to https://github.com/twbs/bootstrap/blob/v3.3.7/js/tooltip.js

• look for the declaration of Tooltip.getPosition: Tooltip.prototype.getPosition = function ($element) {

• The offending lines are: var isSvg = window.SVGElement && el instanceof window.SVGElement and var elOffset = isBody ? { top: 0, left: 0 } : (isSvg ? null : $element.offset())

As you can see, the positioning is deliberately disabled for SVGs. So enable it, by forcibly setting isSvg to false: var isSvg = false

If you're working with the minified version of bootstrap, it is relatively easy to search & replace by looking for getPosition's prototype declaration as well. The isSvg variable is obfuscated, but should be around there as well.