[英]How can i loop through bootstrap tooltips forever using jQuery?
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. 我的网站上有一些缩略图,这些缩略图使用Twitters Bootstrap工具提示显示每个缩略图的名称,我想做的是遍历每个缩略图,比如说显示工具提示会延迟2秒,然后将其隐藏为下一个弹出。 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/ 这是我布局的JSFiddle: http : //jsfiddle.net/BWR5D/
Any ideas? 有任何想法吗?
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);
clearInterval(iid);
您可以通过以下方法停止显示工具提示: clearInterval(iid);
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/ 演示: http : //jsfiddle.net/BWR5D/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.