jquery - Bootstrap 工具提示未对齐

Question

我对 Bootstrap 工具提示动画有些奇怪。

我使用这个演示(示例 9)创建了一些面包屑导航 https://codyhouse.co/demo/breadcrumbs-multi-steps-indicator/index.html 并且我已经为每个链接添加了引导工具提示。这一切都很好。

我使用这个样式表添加了一些动画 https://github.com/daneden/animate.css

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

当我第一次将鼠标悬停在一个链接上时，工具提示会按预期进行动画处理，但是当我将鼠标悬停在另一个链接上后再次将鼠标悬停在同一个链接上时，动画和工具提示已向左移动了很多像素。它只有在链接第一次悬停时才能正常工作。

I've created a fiddle

这是我第一次将鼠标悬停在链接上时看到的屏幕截图

这就是我重新访问同一个链接时看到的内容

Answer 1

使用 hide.bs.tooltip 从菜单项中 mouseOut 时，您需要删除 bounceIn 类:

$('[data-toggle="tooltip"]').on('hide.bs.tooltip', function() {
  $('.tooltip').removeClass('animated bounceIn');
});

看到它在这里工作 - https://jsfiddle.net/n9dqz983/4/