Question

悬停时，有没有办法在bootstrap工具提示中添加向下滑动动画。

<img src="assets/images/icons/facebook.png" alt="facebook" data-toggle="tooltip" data-placement="top" title="Find us on facebook">

 $(function () {
   $('[data-toggle="tooltip"]').tooltip({
     animation: 'fade'
   });
})

默认情况下它会消失，但是当我在它上面使用一些动画时它不起作用。

我尝试使用animate.css，但发生了同样的问题。

 $(function () {
   $('[data-toggle="tooltip"]').tooltip({
     animation: 'animated slideInDown'
   });
})

Answer 1

在悬停元素之前，不会生成工具提示。在显示工具提示后，您需要从animate.css添加相应的类。

$(function () {
    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
        $('.tooltip').addClass('animated swing');
    })
})

Fiddle demo

Answer 2

选项可以通过数据属性或JavaScript传递。对于数据属性，请将选项名称附加到data-，如data-animation=""。

- 您需要关注Apply a CSS fade transition to the tooltip而不是类的animated slideInDown的bootstarp文档from here。顺便说一下，它是一个布尔类型。

animate.css建议你为元素添加类，你想要动画。

所以你需要添加一些额外的jquery，如：

    $('[data-toggle="tooltip"]').hover(function (){
          $(this).next().addClass("animated shake");               
    });

如何在bootstrap Tooltip上添加动画？

2 个答案: