引导工具提示未对齐答案

【问题标题】：Bootstrap tooltip out of alignment引导工具提示未对齐
【发布时间】：2017-12-20 15:24:29
【问题描述】：

我对 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

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

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

【问题讨论】：

bounceIn css 类引起的问题
是的，正如@Morpheus 所说，如果您从addClass() 中删除bounceIn，则该位置看起来是正确的
我将bounceIn类用于悬停动画
有趣...这是bounceIn 类。我尝试了一个不同的类，它应该正常工作

标签： jquery css twitter-bootstrap-3 tooltip css-animations

【解决方案1】：

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

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

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

【讨论】：