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

【问题标题】：Bootstrap Tooltip Not showing on SVG Hover引导工具提示未显示在 SVG 悬停上
【发布时间】：2013-06-11 19:56:35
【问题描述】：

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

【问题讨论】：

标签： twitter-bootstrap jquery-svg

【解决方案1】：

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

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

Container 可以是任何非 svg 元素的容器。在你的情况下说.well，这样你就可以写成

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

Demo

见tooltip options

【讨论】：

感谢 PSL，所以我们总是必须传递诸如 container:'body' 这样的选项，对吗？
@MonaCoder 欢迎您。您也可以提供任何其他容器。喜欢$('.firststar').tooltip({title:'some title', container:'.well'});