how to add animation on bootstrap Tooltip?

Question

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

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

Answer 2

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

-- You need to care about bootstarp documentation from here that Apply a CSS fade transition to the tooltip not a class like animated slideInDown. By the way it's an boolean type.

animate.css is suggesting you to add classes for the elements, you want animated.

So you need to add some extra jquery like :

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