twitter-bootstrap - 引导工具提示未显示在 SVG 悬停上

Question

你能看看这个链接，让我知道为什么这个 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="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();

Answer 1

原因是因为默认情况下它会在 svg 中插入动态生成的工具提示 div，这使得浏览器不会呈现它。而是使用container选项中的属性来设置需要放置 boostrap 生成的 div 的容器。请参阅下面的前任：

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

容器可以是任何非 svg 元素容器。说你的情况.well，所以你会写成

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

演示

查看工具提示选项