循环通过bootstrap工具提示元素,同时显示和隐藏它们

时间:2015-03-04 00:39:49

标签: javascript jquery twitter-bootstrap

我正在尝试循环遍历tooltipabble元素,并在每个元素上显示工具提示 在一段时间内,隐藏了之前显示的那个。

展示它们一切都很好,但我对如何隐藏前一个有疑问。

我正在使用bootstrap工具提示('显示')和工具提示('隐藏')方法,因此我将元素包装在$()

(function(){
    var i = 0;
    var tt = $('[data-toggle="tooltip"]');

    setInterval(function(){

        // if(oldTip) $(oldTip).tooltip('hide'); // not working

        var tip = tt[i++];
        $(tip).tooltip('show');

        // tried saving old instance here but that didn't work
        // oldTip = tip;

        if(i >= tt.length) i = 0;

    }, 2000);
})();

2 个答案:

答案 0 :(得分:2)

(function () {
    var i = 0;
    var tt = $('[data-toggle="tooltip"]');

    setInterval(function () {

        // hide all tooltips
        tt.tooltip('hide');
        // show the one we want (use toggle - as show will compete with hide)
        $(tt[i++ % tt.length]).tooltip('toggle');

    }, 2000);
})();

演示:http://jsfiddle.net/billymoon/60e7ejj5/1/

答案 1 :(得分:1)

将oldTip变量保存在setInterval回调之外。请参阅演示:http://jsfiddle.net/1vm90Lcx/

(function(){
var i = 0;
var tt = $('[data-toggle="tooltip"]');
var oldone;

setInterval(function(){

    if(oldTip) $(oldTip).tooltip('hide'); 

    var tip = tt[i++];
    $(tip).tooltip('show');
    oldTip = tip;

    if(i >= tt.length) i = 0;

}, 2000);
})();