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

Question

你能看看这个LINK让我知道为什么这个 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();

Answer 1

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

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

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

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

Demo

见 tooltip options