5

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.

7

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.

3

I encountered exactly the same annoying bug, and didn't manage to find any solution. However, what seemed more reasonable to me is to get around this bug by wrapping that <svg> with an ordinary HTML element like <div>, and set tooltip on that <div>.

$('.svg-wrap').tooltip({
    'container': 'body',
    'placement': 'top',
    'html':'true',
    'title': '<strong class="text-uppercase">France</strong><br/> example html content.'
});
1
  • Thanks this saved me. Dec 15 '17 at 12:10
3

In Bootstrap 3.3.5 this is still working.

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

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

1
  • 2
    I would give you more votes, if I could. This saved me heaps of time. Using 3.3.7, overwriting the getPosition method with the old version.
    – ebbishop
    Nov 15 '17 at 21:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.