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，使用属性（ {{1 ）或初始化选项的一部分（ data-animation="true" ）。

因此，您可以像这样更新HTML：

{animation: true}

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

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

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

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

1 个答案:

Demo in jsFiddle