我想在几秒钟后自动隐藏 Boostrap 工具提示。
<input type="text" title="" data-placement="bottom" style="width:200px" data-toggle="tooltip" autocomplete="off" data-provide="typeahead" class="form-control Waring" name="medicine_name" id="medicine_name" data-original-title="Please Enter Valid medicine name">
【问题讨论】：
标签： javascript html twitter-bootstrap-3 twitter-bootstrap-tooltip
我将它用于所有引导工具提示的页面范围自动隐藏：
$(function () {
$(document).on('shown.bs.tooltip', function (e) {
setTimeout(function () {
$(e.target).tooltip('hide');
}, 10000);
});
});
【讨论】：
试试这个
$('#element').on('shown.bs.tooltip', function () {
setTimeout(function () {
$('#element').tooltip('destroy');
}, 2000);
})
【讨论】：
Bootstrap 有这个开箱即用，你可以在选项中设置延迟属性（在 js 中）
delay: { show: 500, hide: 100 }
在 HTML 中：
data-delay='{"show":"500", "hide":"100"}'
100 毫秒后将触发隐藏的位置
【讨论】：
hide 是鼠标指针离开目标时工具提示隐藏之前的延迟。只要指针在目标上，就会显示工具提示。我相信 OP 想知道如何在指针仍在目标上方一段时间后使工具提示消失。
不知道为什么甚至 bootstrap 4 都没有内置此功能。无论如何
HTML
<button class="btn" data-toggle="tooltip" title="helloworld" data-trigger="click" type="button">click</button>
JS
$(document).on('show.bs.tooltip', function (e) {
if ($(e.target).data('trigger') == 'click') {
var timeoutDataName = 'shownBsTooltipTimeout';
if ($(e.target).data(timeoutDataName) != null) {
clearTimeout($(e.target).data(timeoutDataName));
}
var timeout = setTimeout(function () {
$(e.target).click();
}, 5000);
$(e.target).data(timeoutDataName, timeout);
}
});
$(document).on('hide.bs.tooltip', function (e) {
if ($(e.target).data('trigger') == 'click') {
var timeoutDataName = 'shownBsTooltipTimeout';
if ($(e.target).data(timeoutDataName) != null) {
clearTimeout($(e.target).data(timeoutDataName));
}
}
});
【讨论】：
如果你使用的是 Bootstrap v4，你可以试试这个：
$(document).on('show.bs.tooltip', function (e) {
setTimeout(function() { //calls click event after a certain time
$('[data-toggle="tooltip"]').tooltip('hide');
}, 4000);
});
show.bs.tooltip 事件在工具提示show 被触发后被调用。
来源：https://v4-alpha.getbootstrap.com/components/tooltips/#events
【讨论】：
这里是简单的答案
$(selector).tooltip({title:"Event", trigger:"focus or hover only", delay:{hide:800}});
在延迟选项中只给出隐藏参数。
我不知道为什么对点击事件不起作用.....
但是在焦点（点击标签）和悬停事件上工作正常！！
【讨论】：
如果你和我一样，但其他所有方法都不起作用，那么这是 jquery 上的直接解决方案。
HTML：
<span data-toggle="tooltip" title="Button-tooltip" data-placement="top">
<button role="button">Button</button>
</span>
jquery：
$('[data-toggle="tooltip"]').on("mouseleave", function(){
$(this).tooltip("hide");
})
如果数据选择器是您要定位的元素，那么每次鼠标离开该元素时，它都会隐藏工具提示。
【讨论】：
这里是 bootstrap 3 手动 onclick 工具提示自动隐藏的解决方案：
var el = $(document).find('#element');
el.tooltip({
"title": "Some title",
"trigger": "manual",
"placement": "top"
});
el.tooltip('show');
setTimeout(function() {
el.tooltip('hide');
}, 900);
【讨论】：
不需要编写额外的 js 代码，因为这个功能在 Bootstrap 中已经存在。让我假设您不需要在几秒钟后隐藏，但是如果已经阅读过烦人的工具提示，则需要删除它。如果您需要自动隐藏 Bootstrap 工具提示（或弹出框）等行为，或者单击工具提示之外的任何位置，请使用和样式化可以聚焦的元素。例如按钮。
在模板使用代码中：
<button class="tooltip-button"
role="button"
data-toggle="tooltip"
data-placement="right"
data-html="true"
data-trigger="focus hover"
data-title="Your tooltip html code or text">*</button>
使用 SCSS 样式将按钮作为常规文本引入：
button.tooltip-button {
cursor: pointer;
border: none;
background-color: transparent;
padding: 0;
&:not(:disabled) {
outline: none;
}
}
并且不要忘记在您的基础模板中初始化页面上的所有工具提示：
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
</script>
【讨论】：
在我的情况下，我有多个弹出窗口，无法从创建它的元素轻松获取弹出窗口 ID。 这是我想出的代码，以防万一它对其他人有帮助：
// get the id for the latest popover
var popid = document.getElementsByClassName('popover')[document.getElementsByClassName('popover').length -1].id;
setTimeout(function () {
$('#' + popid).fadeOut('slow');
}, 8000);
【讨论】：