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

Question

你能看看这个吗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'});

Answer 1

这些是详细说明的步骤:

1. 下载 Bootstrap source

2. <罢工> The question you linked to显然有解决 Boostrap 中错误的方法。复制 getPosition 的代码。 在 tooltip switch 中为 center 添加一个 case(再次为 getPosition Ctrl+F，但找不到函数，而是找到它的用途)，如下所示:

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

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

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