How can i loop through bootstrap tooltips forever using jQuery?

Question

I have some thumbnails on my site, that use Twitters Bootstrap tooltips to display the name of each thumbnail, what i'm trying to do is loop through each one, with a delay of say 2 seconds showing the tooltip, then hiding it as the next one pops up. I tried to do this a few ways but nothing was working.

I got as far as something like this, but that wasn't working.

$("[rel=tooltip]").each(function (i) {
      $id=$(this).attr('id');
      $($id).tooltip('show');
  });

Here's a JSFiddle of my layout: http://jsfiddle.net/BWR5D/

Any ideas?

Answer 1

Try the following:

var ttid = 0, tooltipIds = [];
$("a[rel=tooltip]").each(function(){
    tooltipIds.push(this.id);
});

var iid = setInterval(function(){
    if (ttid) $('#'+tooltipIds[ttid-1]).tooltip("hide");
    if (ttid === tooltipIds.length) ttid = 0;
    $('#'+tooltipIds[ttid++]).tooltip("show");
}, 2000);

• You can stop the tooltips from showing with: clearInterval(iid);

Answer 2

Following should hide current open tooltip, then show the next. Uses current index vs length of cached elements to determine when to start back at beginning

/* cache elements*/
var $els=$("a[rel=tooltip]").tooltip(), index=-1;

var tipLoop=setInterval(function(){
    index++;
    index =  index < $els.length ? index : 0;
    $els.tooltip("hide").eq( index).tooltip('show');    
},2000)

DEMO: http://jsfiddle.net/BWR5D/1/