0

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'});
});
Irvin Dominin
  • 30,819
  • 9
  • 77
  • 111
user1298426
  • 3,467
  • 15
  • 50
  • 96

1 Answers1

0

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.

monners
  • 5,174
  • 2
  • 28
  • 47
  • I have used that as well... but it still triggers an event before slide is complete. You can also check that by adding alert in slid event... I have mentioned that in the question as well. – user1298426 Aug 14 '13 at 10:44
  • It doesn't appear to be triggering before slide completes for me... Could you make a jsbin of the problem? – monners Aug 14 '13 at 10:46
  • ok ... i will try to do that.. just one thing... can i keep the container only div id/class ?.... because i want to show tooltip only for the elements which are in
    .
     – user1298426 Aug 14 '13 at 11:10
  • I don't understand what you're asking – monners Aug 14 '13 at 11:14
  • can i change **{container: 'body'}**? & add div class instead of 'body' like {container: 'carousel-inner'} .. this carousel-inner is a div class – user1298426 Aug 14 '13 at 11:21
  • I don't know. That depends entirely on what .tooltip does, which you haven't posted – monners Aug 14 '13 at 11:43