jquery – 如何将Bootstrap工具提示置于SVG的中心

2023年1月17日 218次阅读

您能否看一下这个
JsFiddle,让我知道如何将工具提示集中在SVG中？我已经在
this post看到了同样的问题,但老实说这对我来说太混乱了！

这是我的代码：

<div class="container">
 <div class="well">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
    <ellipse class="firststar" cx="200" cy="200" rx="150" ry="150"/>
   </svg>
 </div>
</div>

和jquery代码：

$('.firststar').tooltip({title:'Test SVG Centering', container:'.well', placement: 'top'});

最佳答案 这些是规定的步骤：

>下载Bootstrap source
> The question you linked to显然已经解决了Boostrap中的错误.复制getPosition的代码.在工具提示开关中为中心添加一个案例(再次按Ctrl F表示getPosition,但找不到函数,但是使用它),如下所示：

case: 'center':
  tp = {top: pos.top + pos.height / 2 - actualHeight / 2, 
        left: pos.left + pos.width / 2 - actualWidth / 2}
  break

>确保更改HTML中的链接以引用更新的bootstrap.js文件.

编辑：link to working JFiddle.
自另一篇文章以来,Bootstrap代码已经发生了变化,这是实现您想要的最简单的方法.

点赞