javascript 自动隐藏引导工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25075807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto hide bootstrap tooltip
提问by Dhanil
I want to hide automatically the Boostrap tooltip after few seconds.
我想在几秒钟后自动隐藏 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">
采纳答案by V31
Bootstrap has this out of the box, you can set a delay property in options (in js)
Bootstrap 开箱即用，您可以在选项中设置延迟属性（在 js 中）
delay: { show: 500, hide: 100 }
and in HTML:
并在 HTML 中：
data-delay='{"show":"500", "hide":"100"}'
where hide will get triggered after 100 ms
100 毫秒后将触发 hide
回答by Lars Holm Jensen
I use this for page-wide auto-hide on all bootstrap tooltips:
我使用它在所有引导程序工具提示上进行页面范围的自动隐藏：
$(function () {
$(document).on('shown.bs.tooltip', function (e) {
setTimeout(function () {
$(e.target).tooltip('hide');
}, 10000);
});
});
回答by Rishabh Agrahari
If you are using Bootstrap v4 then, you can try this:
如果您使用的是 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.tooltipevent is called after a tooltip showis triggered.
show.bs.tooltipshow触发工具提示后调用事件。
Source: https://v4-alpha.getbootstrap.com/components/tooltips/#events
来源：https: //v4-alpha.getbootstrap.com/components/tooltips/#events
回答by doniyor
try this
试试这个
$('#element').on('shown.bs.tooltip', function () {
setTimeout(function () {
$('#element').tooltip('destroy');
}, 2000);
})
回答by doniyor
No idea why even bootstrap 4 does not have this feature build in. Anyway
不知道为什么即使是 bootstrap 4 也没有内置这个功能。无论如何
HTML
HTML
<button class="btn" data-toggle="tooltip" title="helloworld" data-trigger="click" type="button">click</button>
JS
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));
}
}
});
回答by Shaffron
Here is Simple Answer
这是简单的答案
$(selector).tooltip({title:"Event", trigger:"focus or hover only", delay:{hide:800}});
Give only hide parameter in delay option.
在延迟选项中只给出隐藏参数。
I don't know why doesn't work on click event.....
我不知道为什么点击事件不起作用.....
but on focus(tab of click) and hover event works fine!!
但是在焦点（单击选项卡）和悬停事件上工作正常！！
回答by Martin Alvarado
If you are like me and all else did not work the this is a straight forward solution on jquery.
如果您像我一样并且所有其他方法都不起作用，那么这是 jquery 的直接解决方案。
HTML:
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");
})
were the data selector is the element you want to target so each time your mouse leaves that element it will hide the tooltip.
如果数据选择器是您要定位的元素，则每次鼠标离开该元素时，它都会隐藏工具提示。
回答by Artem Shevtsov
Here is the solution for bootstrap 3 manual onclick tooltip autohide:
这是 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);
回答by Aliaksandr Harbunou
Need not to write additional js code, cause this functionality already exists in Bootstrap. Let me suppose that you need not to hide after seconds, but you need to remove annoying tooltip if it already has been read. If you need behavior such as auto-hide Bootstrap tooltip (or popover) on focus out or click anywhere outside of tooltip, use and stylize element which can be in focus. For instance BUTTON.
不需要写额外的js代码，因为这个功能在Bootstrap中已经存在了。让我假设您不需要在几秒钟后隐藏，但是如果已经阅读了烦人的工具提示，您需要删除它。如果您需要在聚焦时自动隐藏 Bootstrap 工具提示（或弹出框）或单击工具提示之外的任何位置等行为，请使用可以聚焦的元素并对其进行样式化。例如按钮。
In template use code:
在模板中使用代码：
<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>
Style with SCSS to introduce button as regular text:
使用 SCSS 样式将按钮引入为常规文本：
button.tooltip-button {
cursor: pointer;
border: none;
background-color: transparent;
padding: 0;
&:not(:disabled) {
outline: none;
}
}
And don't forget in your base template initialize all tooltips on page:
并且不要忘记在您的基本模板中初始化页面上的所有工具提示：
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
</script>
