How to check if bootstrap carousel has stopped sliding?

Question

I need to apply tooltip for the list that is feteched and shown using carousel. In that list of items whichever is wrapped with ellipses I need to show the tooltip for them.

But if I moveover mouse before sliding is completed then tooltip appears to be at the corner of page.

This is my code to show tooltip on mouseover.

I checked using .slid event given in their website & also by checking if carousel-inner child is active or not but this also doesn't work and both these events fire before the sliding is complete.

$('.tooltipcheck').mouseover(function() {
     var $this = $(this);
     if (this.offsetWidth < this.scrollWidth)
        $(this).tooltip( {container: 'body'});
});

Answer 1

Bootstrap's carousel has a callback that can be hooked into after a slide has finished sliding (called 'slid'). You could initiate your test in the slid callback, like so:

$('#myCarousel').on('slid', function() {
    $('.tooltipcheck').mouseover(function() {
         var $this = $(this);
         if (this.offsetWidth < this.scrollWidth)
         $(this).tooltip( {container: 'body'});
    });
});

That way you're not calling the test until after the slide has finished transitioning, and it'll refresh on every new slide transition.