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