javascript - 如何使用 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/