jquery - 如何在 Twitter Bootstrap 工具提示上启用淡入淡出效果？

Question

我正在尝试在我的网站上实现 Twitter Bootstrap 工具提示，但是淡入淡出效果不起作用。当我将鼠标悬停在我想要工具提示的任何元素上时，工具提示会相应地出现和消失，没有 Twitter 在其 site 上展示的淡入淡出效果。 .

这是我的代码:

jQuery:

jQuery(function () {
    jQuery('[data-toggle=tooltip]').tooltip();
});

HTML:

<span href="#" data-toggle="tooltip" data-placement="top" title="Tooltip showing">
   stranger
</span>

我非常希望将鼠标悬停在该元素上时出现淡入淡出效果。我在 Firefox 和 Chrome 中都试过了，淡入淡出效果不起作用。

Answer 1

根据Bootstrap docs on Tooltips ，您可以通过将 animation 选项设置为 true 来实现，或者使用 attribute (data-animation="true")或作为初始化选项的一部分({animation: true})。

因此您可以像这样更新您的 HTML:

<span href="#" <i>class="tip"</i>
      title="Tooltip showing"
      data-toggle="tooltip" 
      data-placement="top"
      <b>data-animation="true"</b> >
    stranger
</span>

或者像这样添加你的初始化代码:

$(<i>'.tip'</i>).tooltip(<b>{animation: true}</b>);

提示:在 jQuery 选择器中使用类而不是数据属性会提高性能。

Demo in jsFiddle