how to add animation on bootstrap Tooltip?

Question

Is there any way to add slide down animation on bootstrap tooltip, when hover.

<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'
   });
})

By default it is fade, but when I use some animation on it it dose not work.

I have tried to use animate.css but same issue occurred.

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

Answer 1

The tooptip is not generated until you hover the element. You need to add the respective class from animate.css after tooltip is shown.

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

Fiddle demo