Question

我对 svg元素的Bootstrap（3.3.7）工具提示有问题。当页面滚动到顶部时，工具提示工作正常。但每当我向下滚动页面时，工具提示都有错误的垂直位置（我向下滚动页面越多，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

在Bootstrap 3.3.5中，这仍然有效。

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

cfquery documentation

Answer 2

我遇到了完全相同的烦人的bug，并没有设法找到任何解决方案。但是，对我来说似乎更合理的是通过将<svg>与<div>等普通HTML元素包装在一起来解决此错误，并在<div>上设置工具提示。

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

Answer 3

详细说明@ gabel的答案，修复bootstrap v3.3.7，

转到https://github.com/twbs/bootstrap/blob/v3.3.7/js/tooltip.js
寻找Tooltip.getPosition的声明：Tooltip.prototype.getPosition = function ($element) {
违规行是： var isSvg = window.SVGElement && el instanceof window.SVGElement 和 var elOffset = isBody ? { top: 0, left: 0 } : (isSvg ? null : $element.offset())

如您所见，SVG故意禁用定位。因此，通过将isSvg强制设置为false var isSvg = false

来启用它

如果你正在使用缩小版本的bootstrap，那么搜索和搜索相对容易。取而代之的是查找getPosition的原型声明。 isSvg变量是混淆的，但也应该在那里。

当页面向下滚动时，引导工具提示svg元素上的错误位置

3 个答案: