如何在 SVG 中心居中引导工具提示答案

【问题标题】：How Can I Center Bootstrap Tooltip in center of SVG如何在 SVG 中心居中引导工具提示
【发布时间】：2013-06-11 20:29:29
【问题描述】：

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

【问题讨论】：

另一个问题及其答案到底有什么令人困惑的地方？
嗨罗伯特，谢谢你的评论，我可以说代码的所有部分。如你所见，我有一个非常简单的 SVG，但我不知道如何使用 jquery 部分中的代码?另外我不知道'w3.org/2000/svg'是什么？由于有人已经在该问题上发布过，该帖子包含问题的一小部分，很难完全理解
您必须在您的 jquery 副本中找到该函数并对其进行修改。
函数在你的 jquery 副本中！哪个副本？我只是从 jquery.com 下载 jquery，我什么都没有！都是上面提到的链接
有什么办法可以解决这个问题吗？

标签： jquery css twitter-bootstrap svg tooltip

【解决方案1】：

这些是详细说明的步骤：

下载Bootstrap source
~~The question you linked to 显然已经解决了 Boostrap 中的错误。复制 getPosition 的代码。~~ 在工具提示开关中为 center 添加一个 case（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。自另一篇文章以来，引导代码已更改，这是实现您想要的最简单的方法。

【讨论】：

如果您对这个修复的历史以及代码为何如此工作感到好奇，您链接的帖子也有一些详细信息。正如 Robert Longson 先生在错误报告 (bugzilla.mozilla.org/show_bug.cgi?id=649285) 中解释的那样，SVG 元素没有 height 属性，但 Bootstrap 代码假定它们有。因此，他指出获取 SVG 元素高度的方法是 $(element).getBBox().height (stackoverflow.com/questions/7620509/…)。这就是您粘贴的代码的作用。
嗨，bbill，感谢您的完美指导。我更新了链接上的代码库并更新了 jsfiddle 链接，但工具提示仍未显示在中心。它实际上位于顶部！你能告诉我为什么会这样吗？
我还删除了“placement: 'top'”，但工具提示仍然弹出在 svg 的顶部，而不是在中心
placement 根据文档仅接受顶部、底部、左侧和右侧。您最好的选择是将其设置为正确，然后将您之前修改的同一段代码中的一行更改为 width = bbox.width / 2
对。也许更好的解决方案是去使用 getPosition 的地方并查看那里的 switch 语句，添加一个中心大小写并按照右、上、左等示例在元素的中心添加一个工具提示。