Bootstrap Tooltip在SVG Hover上不显示

Question

你能看一下这个LINK,让我知道为什么bootstrap工具提示没有在这个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'});

演示

请参阅工具提示选项