Как добавить анимацию в bootstrap Tooltip?

Question

Есть ли способ добавить анимацию слайда вниз при всплывающей подсказке при наведении курсора.

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

Fiddle demo

Answer 2

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции в data-, как в data-animation="".

- Вы должны заботиться о bootstarp документации from here что Apply a CSS fade transition to the tooltip не класса как animated slideInDown. Кстати, это булевский тип.

animate.css предлагает вам добавить классы для элементов, которые вы хотите анимировать.

Так что вам нужно, чтобы добавить некоторые дополнительные JQuery, как:

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