javascript - 循环 Bootstrap 工具提示元素,同时显示和隐藏它们

标签 javascript jquery twitter-bootstrap

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

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

我正在使用 bootstrap tooltip('show') 和 tooltip('hide') 方法,所以我将元素包装在 $()

(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);
})();

最佳答案

(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/

关于javascript - 循环 Bootstrap 工具提示元素,同时显示和隐藏它们,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28844742/

相关文章:

javascript - 使下拉列表在 Bootstrap 响应表中可见

html - 无法更改按钮的背景颜色

javascript - Chartjs 无法在 IE8 中工作,即使包含 excanvas 后也会出现 Canvas 元素问题

javascript - 打印页面的一部分 javascript

javascript - HTML5 视频 - Canvas 上的图像

javascript - 单击按钮时无法读取 null 的属性 'setState'

javascript - 查找给定元素的规范有效属性

javascript - 为什么我的 bootstrap 缩略图在我的 Jumbotron 里面?

javascript - 如何使 CSS 变换从当前位置开始运行

javascript - 当用户要写东西时如何防止重新加载?