如何延迟显示/隐藏引导工具提示？答案

【问题标题】：How to delay show/hide of bootstrap-tooltips?如何延迟显示/隐藏引导工具提示？
【发布时间】：2013-02-16 17:39:00
【问题描述】：

我无法使 twitter 引导工具提示的数据延迟属性正常工作。我正在使用它：

这是我的使用方法：

<a href="#" data-toggle="tooltip" data-delay="{ show: 5000, hide: 3000}">with delay</a>
<script>
    jQuery('a[data-toggle="tooltip"]').tooltip().click( function(e) {
        e.preventDefault(); 
    });
</script>

但我没有看到显示/隐藏有任何延迟。任何想法为什么？

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

最后我得到了它的数据属性。

data-delay='{"show":"5000", "hide":"3000"}'

对象必须用单引号括起来，键用双引号和值用双引号或无，可能取决于类型。是唯一可行的方法。

这也适用于弹出框。

【讨论】：

奇怪的是，双引号和单引号似乎不能反过来工作。
data-delay 属性似乎是 JSON 格式，这就是为什么您显然必须双引号键名。仅供参考，如果您不想要，您不必引用整数值，例如data-delay='{"show": 100, "hide": 1000}'
这应该是答案。不是基于 javascript 的解决方案。
这实际上回答了它所写的问题
data-delay='{"show": 100, "hide": 1000}' 和 data-delay='{"show":"5000", "hide":"3000"}' 没有为我做任何事情。这对其他人有用吗？

【解决方案2】：

为什么不能这样呢？

$('a').tooltip({
     'delay': { show: 5000, hide: 3000 }
});

【讨论】：

它给了我一个意外的标记：由于某种原因出错，可能是语法错误。
这确实有效，但它没有回答如何让它与数据属性一起工作的原始问题。
@Pepper 实际上他没有提到他需要与dataattribute.right.. 一起工作..？
@Gautam3164 标题上写着Data delay，他说这在使data-delay attribute 工作时遇到了麻烦。所以有点提到他想使用data attribute。
@azeós but i don't see any delay on show/hide 你能看到这个吗？这对他不起作用。这就是我给出答案的原因……他甚至也接受了它……但放下它并没有那么糟糕

【解决方案3】：

我更喜欢这样：

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip({'delay': { show: 5000, hide: 3000 }
    });   
});

【讨论】：

我喜欢这样，因为无论如何您都需要 js 函数，可以为将所有或大部分配置放在一个地方提供一个很好的论据。
当我使用 Javascript delay: { "show": 500, "hide": 0 } 它在 Andriod chrome 中不起作用

【解决方案4】：

您的答案不适用于 Bootstrap 3.3.2。这个适用于我的版本：

data-delay='{"show":5000, "hide":3000}'

来源：https://github.com/twbs/bootstrap/issues/13874

【讨论】：

【解决方案5】：

你可以使用：

<div ... popover-popup-delay="2000" ...>

【讨论】：

【解决方案6】：

用于 AngularJS (UI)：

<div tooltip="Hello" tooltip-popup-delay="500"></div>

【讨论】：

【解决方案7】：

解决方法！

无法让它在模态框上用于我的信息消息弹出框，但在我的 JavaScript 中使用了此解决方法：

$('#infoPopover').attr("data-original-title", "Delete Document");
$('#infoPopover').attr("data-content", "Success");
$('#infoPopover').popover('show');
setTimeout(function () { $('#infoPopover').popover('hide') }, 4000);

它适用于空跨度...

<span id="infoPopover" data-toggle="popover"></span>

弹出框显示几秒钟然后再次隐藏。

Image of popover info message on a modal

【讨论】：