부트 스트랩 툴팁이 일치하지 않음

Question

부트 스트랩 툴팁 애니메이션에 이상한 점이 있습니다.

이 데모 (예 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 다른 링크, 애니메이션을 통해 떠오르게 후 다시 같은 링크 위에 마우스를 때 예상대로 애니메이션이 스타일 시트를 이용하여 어떤 애니메이션을 첨가 툴팁이 꽤 많은 픽셀만큼 왼쪽으로 이동했습니다. 링크가 처음 잡힐 때만 제대로 작동합니다. 여기

I've created a fiddle

내가 먼저 링크

을 위로 마우스를 이동하면 표시되는 내용의 스크린 샷입니다 그리고 이것은 내가 revist 때 내가 볼 것입니다 같은 링크

그

Answer 1

bounceIn 클래스를 제거해야합니다. 당신이로 마우스를 hide.bs.tooltip를 사용하여 메뉴 항목에서 :

는

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

여기서 일을 참조하십시오 - @Morpheus 말했듯이 bounceIn`의 CSS 클래스`에 의한 https://jsfiddle.net/n9dqz983/4/