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)

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

如何使用jQuery永久循环引导工具提示？

2 个答案: