CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3tooltipcss-animations
Peter Griffin
Peter Griffin

Reputation: 300

Bootstrap tooltip out of alignment

I am having some weirdness with Bootstrap tooltip animations.

I have created some breadcrumbs using this demo (example 9) https://codyhouse.co/demo/breadcrumbs-multi-steps-indicator/index.html and I've added bootstrap tooltips to each link. This all works fine.

I added some animations using this stylesheet 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');         
    });
});

When i first hover over a link, the tooltip animates as expected however when I hover over the same link again after hovering over another link, the animation and tooltip have moved to the left by quite a few pixels. It only workds properly when the link is first hovered.

I've created a fiddle

Here is a screenshot of what I see when I first hover over a link

enter image description here

And this is what i see when i revist that same link

enter image description here

Upvotes: 0

Views: 777

Answers (1)

Alex
Alex

Reputation: 9041

You need to remove the bounceIn class when you mouseOut from the menu item using hide.bs.tooltip:

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

See it working here - https://jsfiddle.net/n9dqz983/4/

Upvotes: 0

Related Questions