如何将Bootstrap提示框居中在SVG中

Question

如何将Bootstrap提示框居中在SVG中

4

请您看一下这个JsFiddle，告诉我如何在SVG内部居中显示工具提示？我已经在这篇帖子上看到了相同的问题，但说实话，对我来说太难理解了！

以下是我的代码：

<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'});

- Mona Coder

其他问题及其答案到底有什么令人困惑的地方？ - Robert Longson

嗨，Robert，感谢你的评论，我可以说代码的所有部分。如您所见，我有一个非常简单的SVG，并且我不知道如何在jquery部分中使用该代码？另外，我不知道'http：//www.w3.org/2000/svg'是什么？正如其他人已经在问题上发布的那样，帖子只包含问题的很小一部分，难以完全理解。 - Mona Coder

你需要在你的 jQuery 拷贝中找到那个函数并修改它。 - Robert Longson

有没有什么想法来解决这个问题？ - Mona Coder

好的，我现在明白了。无论如何，我根据bbill的评论更新了jsfiddle文件，它改变了工具提示的位置，但仍然没有居中！ - Mona Coder

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bbill · Accepted Answer

以下是详细步骤：

Download the Bootstrap source
~~The question you linked to apparently has a solution to the bug in Boostrap. Copy the code for getPosition.~~ Add a case for center in the tooltip switch (Ctrl+F for getPosition again, but find not the function, but its use), like so:
```
case: 'center':
  tp = {top: pos.top + pos.height / 2 - actualHeight / 2, 
        left: pos.left + pos.width / 2 - actualWidth / 2}
  break
```
Make sure to change the link in your HTML to reference the updated bootstrap.js file.

编辑：链接到可用的JFiddle。 Bootstrap代码已经改变，这是实现您想要的最简单的方法。