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

Question

我试图在我的网站上实现Twitter Bootstrap工具提示,但淡入淡出效果不起作用.当我将鼠标悬停在我想要提供工具提示的任何元素上时,工具提示会显示并相应消失,而不会显示Twitter在其网站上显示的淡入淡出效果.

这是我的代码的样子:

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文档,您可以通过将animation选项设置为(true使用attribute(data-animation="true")或作为初始化选项({animation: true})的一部分来实现.

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

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

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

$('.tip').tooltip({animation: true});

提示:在jQuery选择器中使用类而不是数据属性的性能要高得多.

在jsFiddle演示