Bootstrap提示框在SVG悬停时未显示

Question

请您查看一下链接，并告诉我为什么这个 SVG 上没有显示 Bootstrap 工具提示？

以下是我的代码：

<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="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200  200" xml:space="preserve">
   <polygon  class="firststar" points="64.385,54.267 56.951,50.769 49.854,54.911 50.884,46.76 44.752,41.291 52.823,39.751 56.129,32.229 60.087,39.429 
68.262,40.249 62.639,46.239 "/>
  </svg>
</div>
</div>

和

我正在使用这个jQuery函数

$('.firststar').tooltip();

- Mona Coder

Answer 1

原因是因为默认情况下它将动态生成的工具提示div插入到svg中，这会使浏览器无法渲染它。相反，使用选项中的container属性来设置boostrap生成的div需要放置的容器。请参见以下示例：

$('.firststar').tooltip({title:'sometitle', container:'body'});

容器可以是任何非 SVG 元素容器。在您的情况下，例如 .well，您应该将其编写为：

$('.firststar').tooltip({title:'sometitle', container:'.well'});

演示

请查看工具提示选项

- PSL

---

谢谢PSL，所以我们总是需要传递选项，例如 container: 'body'，对吗？ - Mona Coder

@MonaCoder 不客气。您也可以提供任何其他容器，例如 $('.firststar').tooltip({title:'一些标题', container:'.well'});。 - PSL