как добавить анимацию во всплывающую подсказку bootstrap?


Есть ли способ добавить анимацию скольжения вниз на подсказке 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'
   });
})

По умолчанию это fade, но когда я использую какую-то анимацию, она не работает.

Я пытался использовать animate.css но возникла та же проблема.

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

2 ответа:

Подсказка tooptip не создается до тех пор, пока вы не наведете указатель мыши на элемент. Вам нужно добавить соответствующий класс из animate.css после всплывающей подсказки отображается.

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

Скрипка демо

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

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

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

Поэтому вам нужно добавить некоторые дополнительные jquery, такие как:

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