我如何使用jQuery循环遍历引导工具提示？

Question

我的网站上有一些缩略图，这些缩略图使用Twitters Bootstrap工具提示显示每个缩略图的名称，我想做的是遍历每个缩略图，比如说显示工具提示会延迟2秒，然后将其隐藏为下一个弹出。 我尝试了几种方法，但没有任何效果。

我得到了像这样的东西，但是那没有用。

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

这是我布局的JSFiddle： http : //jsfiddle.net/BWR5D/

有任何想法吗？

Answer 1

请尝试以下操作：

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);

• 您可以通过以下方法停止显示工具提示： clearInterval(iid);

Answer 2

以下应该隐藏当前打开的工具提示，然后显示下一个。 使用当前索引与缓存元素的长度来确定何时开始重新开始

/* 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)

演示： http : //jsfiddle.net/BWR5D/1/