как добавить анимацию во всплывающую подсказку 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 ответа:
Подсказка 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"); });