如何在bootstrap Tooltip上添加动画？

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

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

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

小提琴演示