Bootstrap工具提示不对齐

Question

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

我使用此演示创建了一些面包屑（例9）https://codyhouse.co/demo/breadcrumbs-multi-steps-indicator/index.html  我已经为每个链接添加了bootstrap工具提示。一切正常。

我使用此样式表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

使用bounceIn从菜单项中鼠标输出时，您需要删除hide.bs.tooltip类：

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

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