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

Posted 2021-05-05

我试图在我的网站上实现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中都试过了，淡入淡出效果不起作用。

答案

根据Bootstrap docs on Tooltips，您可以通过将animation选项设置为true，使用属性（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选择器中使用类而不是数据属性的性能要高得多。

Demo in jsFiddle