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

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

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

Demo

请参阅tooltip options

Bootstrap Tooltip在SVG Hover上不显示

1 个答案:

Demo