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

Posted 2023-05-08

【中文标题】如何延迟显示/隐藏引导工具提示？

【英文标题】：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>

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

【参考方案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