我对 bootstrap 的工具提示有疑问：当我点击一个按钮时，即使光标在按钮之外，工具提示仍然存在。我查看了手册 - Bootstrap's tooltip，如果我点击按钮，我会看到同样的问题。有什么解决方案可以解决这个问题吗？刚刚在最新的FF，IE中试过。
【问题讨论】：
标签： javascript twitter-bootstrap tooltip
这是因为trigger 没有设置。触发器的默认值为'hover focus'，因此在单击按钮后工具提示保持可见，直到单击另一个按钮，因为该按钮是focused。
所以您只需将trigger 定义为'hover'。在单击按钮后没有持久工具提示的情况下链接到的同一示例下方：
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
})
小提琴中的文档示例 -> http://jsfiddle.net/vdzvvg6o/
【讨论】：
我知道一岁多，但我无法在这里使用任何示例。我不得不使用以下内容：
$('[rel="tooltip"]').on('click', function () {
$(this).tooltip('hide')
})
这也会在悬停时再次显示工具提示。
【讨论】：
您好，我对此问题几乎没有解决方案。当其他解决方案不起作用时，请尝试以下解决方案：
$('body').tooltip({
selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
trigger: 'hover',
container: 'body'
}).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
$('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
});
这也是拖放的解决方案。 所以我希望这对某人有帮助:)
【讨论】：
在我的情况下，该问题仅在 Internet Explorer 中重现：无论哪个元素（输入、div 等...）具有工具提示 - 如果单击 - 工具提示仍然显示。
在 web 上找到了一些解决方案，建议使用 .hide() 元素的工具提示 Click 事件 - 但这是个坏主意 - 将鼠标悬停回同一个元素 - 使其隐藏... 就我而言
$('.myToolTippedElement').on('click', function () {
$(this).blur()
})
创造了所有的魔法！！！- .myToolTippedElement 是具有课程工具提示的元素...
【讨论】：
在带有 bootstrap 4 和 jquery 的 angular 7 中，我发现了这个，它工作正常。我使用 dispose 是因为它破坏并不会隐藏工具提示。
ngAfterViewChecked() {
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
});
$('[data-toggle="tooltip"]').on('mouseleave', function () {
$(this).tooltip('dispose');
});
$('[data-toggle="tooltip"]').on('click', function () {
$(this).tooltip('dispose');
});
}
【讨论】：
工作解决方案
$(document).on("click",function()
{
setTimeout(function()
{
$('[data-toggle="tooltip"]').tooltip('hide');
},500); // Hides tooltip in 500 milliseconds
});
【讨论】：
这也可以通过添加以下内容在 HTML 中实现：
data-trigger="hover"
<button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>
【讨论】：
大卫上面的回答帮助解决了我的问题。 我在按钮上有悬停和单击事件。 MAC 上的 Firefox 确实如我所愿。也就是说，悬停时显示工具提示，点击时不显示工具提示。 在其他浏览器和操作系统上，当我单击时，工具提示会出现并保持显示。即使我将鼠标移动到其他按钮进行悬停。 这就是我所拥有的：
$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true});
这是解决方法：
$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'});
【讨论】：
你也可以添加：
onclick="this.blur()"
【讨论】：
尝试使用rel="tooltip" 而不是data-toggle="tooltip"，这在我的情况下有效。我正在使用data-toggle="tooltip" 并将触发条件设置为悬停，这在我的情况下不起作用。当我更改我的数据选择器时，它起作用了。
HTML 代码：
<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>
JS 代码 //工具提示 $('.btn').tooltip({ 触发器：“悬停” });
这肯定会删除卡住的工具提示。
【讨论】：
我解决此问题的方法是使用以下代码删除点击事件函数中的工具提示：
$("#myButton").on("click", function() {
$("div[role=tooltip]").remove();
});
【讨论】：
工具提示现在以普通/原版 Javascript 进行初始化。因为我在这里只看到了 JQuery 选项，所以让我在纯 JS 中发布非常简单直接的方式：
//Initialize bootstrap tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map( function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl, {
trigger : 'hover'
});
});
您只需添加“{trigger : 'hover'}”对象作为 bootstrap.Tooltip(element, options) 的选项即可。
来源：https://getbootstrap.com/docs/5.1/components/tooltips/#usage
【讨论】：
您也可以使用下面的方法来隐藏mouseleave上的工具提示，如下：
jQuery("body").on("mouseleave", ".has-tooltip", function(){
jQuery(this).blur();
});
【讨论】：
您也可以将这种方式用于旧版本，因为接受的答案对我不起作用，我为自己编写了这段代码并且效果很好。
$(document).on('mousedown', "[aria-describedby]", function() {
$("[aria-describedby]").tooltip('hide');
});
【讨论】：
这个解决方案对我有用。
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
trigger: 'click'
});
$('a[data-toggle="tooltip"]').click(function(event){
event.stopPropagation();
});
$('body').click(function(){
$('a[data-toggle="tooltip"]').tooltip('hide');
});
我尝试了之前答案中给出的大多数解决方案，但没有一个对我有用。
【讨论】：
我在带有 Safari 的 iPhone 上使用 Bootstrap 4 时遇到了这个问题。
在 PC/桌面上，工具提示运行良好。 但是，在装有 iOS 14 的 iPhone 上查看时，单击/点击按钮后，工具提示仍然可见。隐藏图层时也是如此。
对我来说，添加此代码解决了 iPhone 上的问题：
jQuery('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
});
jQuery('[data-toggle="tooltip"]').on("click", function () {
$(this).tooltip("hide");
});
【讨论】：
我的问题出在 DataTable 中。下面的代码对我有用。
columnDefs: [
{
targets: 0, data: "id",
render: function (data, type, full, meta) {
return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>';
}
}
],
drawCallback: function() {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').on('click', function () {
$(this).tooltip('hide');
});
}
【讨论】：
对我来说，仅当我输入此代码时才有效。 P.S.：我使用的是 Bootstrap 4。
$("body").tooltip({
selector: '[data-toggle=tooltip]',
trigger: 'hover'
}).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
$('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('hide');
});
【讨论】：
我在 cycle.js 中使用引导工具提示，但上述方法都不适合我。
我必须这样做：
return button( selector + '.btn.btn-sm',
{
hook: {
destroy: tooltipOff,
insert: toggleTooltipOn,
},
....
function toggleTooltipOn(vnode){
setupJQuery();
jQuery[0].$( vnode.elm )
.tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}
function tooltipOff( vnode ){
setupJQuery();
jQuery[0].$( vnode.elm ).tooltip('hide');
}
【讨论】：
这对我有用：
$(document).ready(function() {
$('#save').tooltip({
trigger : 'hover'
}) ;
});
我正在动态禁用保存按钮然后问题是。
【讨论】：
在我的情况下，这是修复：
beforeDestroyingElement() {
$('[data-toggle="tooltip"]').tooltip('hide');
}
我没有遵守 Bootstrap 文档中的这条规则：
在从 DOM 中移除相应元素之前，必须隐藏工具提示。
【讨论】：
如果有人想设置一个在点击后会显示一段时间的工具提示，我就是这样做的：
$('[data-toggle="tooltip"]').tooltip({
trigger : 'click'})
$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})
【讨论】：
使用强制 blur() 可能会降低用户体验。我不会那样做的。我发现删除“data-original-title”以及删除属性“data-toggle”和“title”对我有用。
$(id).tooltip('hide');
$(id).removeAttr("data-toggle");
$(id).removeAttr("data-original-title");
$(id).removeAttr("title");
【讨论】：
使用委托使其对 ajax 友好，
// if you're not using turbolinks, then you can remove this parent wrapper
$(document).on('turbolinks:load'), function() {
// enable tooltip with delegation to allow ajax pages to keep tooltip enabled
$('body').tooltip({
select: "[data-toggle='tooltip']"
});
// remove old tooltip from sticking on the page when calling ajax with turbolinks
$('body').on('click', "[data-toggle='tooltip']", function() {
$(this).tooltip('dispose');
});
});
【讨论】：