我对引导程序的工具提示有问题：当我单击按钮时，即使光标在按钮之外，工具提示也会保持不变。我已经查看了手册-引导的工具提示，如果我点击按钮，我会看到同样的问题。有什么解决方案可以解决这个问题吗？刚刚在最新的FF、IE中尝试过。
这是因为未设置trigger。触发器的默认值为'hover focus'，因此在单击某个按钮后，工具提示保持可见，直到单击另一个按钮，因为该按钮为focused。
因此，您所要做的就是将trigger定义为仅'hover'。下面是您链接到的相同示例，单击按钮后不保留工具提示：
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
})
小提琴中的doc示例->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');
});
这也是拖放的解决方案。所以我希望这能帮助到一些人：）
使用Bootstrap 5
工具提示现在用普通的/香草的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’｝"对象作为引导程序的选项。工具提示（元素，选项）。
来源：https://getbootstrap.com/docs/5.1/components/tooltips/#usage
在我的案例中，这个问题只在Internet Explorer中重现：无论哪个元素（input、div等）有工具提示-如果单击-工具提示都会显示。
在web上找到了一些解决方案，推荐.hide（）元素上的工具提示单击事件-但这是个坏主意-悬停回同一个元素-保持隐藏。。。在我的情况下是
$('.myToolTippedElement').on('click', function () {
$(this).blur()
})
创造了所有的魔法！！！-其中.myToolTippedElement是具有"课程"工具提示的元素。。。
这在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>
在angular 7中使用bootstrap 4和jquery我发现了这一点，它运行良好。我使用了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
});
我解决这个问题的方法是使用以下代码删除点击事件函数中的工具提示：
$("#myButton").on("click", function() {
$("div[role=tooltip]").remove();
});
您还可以添加：
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'）.tittip({触发器："悬停"})；
这肯定会删除卡住的工具提示。
David上面的回答帮助解决了我的问题。我在按钮上既有悬停事件，也有点击事件。MAC上的Firefox确实表现得很好。也就是说，悬停时显示工具提示，单击时不显示工具提示。在其他浏览器和操作系统上，单击时，工具提示将显示并保持显示状态。即使我将鼠标移动到其他按钮进行悬停。这就是我所拥有的：
$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true});
这是修复：
$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'});
如果什么都不起作用，请尝试此操作。*单击按钮或任何具有工具提示的元素时执行。
let tooltip = document.getElementsByClassName("tooltip");
tooltip[0].parentNode.removeChild(tooltip[0]);
您也可以使用以下方法隐藏鼠标离开上的工具提示，如下所示：
jQuery("body").on("mouseleave", ".has-tooltip", function(){
jQuery(this).blur();
});
您也可以在旧版本中使用这种方式，因为接受的答案对我不起作用，而且我为自己写了这段代码，而且它运行得很好。
$(document).on('mousedown', "[aria-describedby]", function() {
$("[aria-describedby]").tooltip('hide');
});
对我来说，只有当我放入此代码时才有效。附言：我用的是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');
});
此解决方案对我有效。
$('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/Desktop上，工具提示运行良好。但在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');
});
}
如果上面的多个解决方案/建议不起作用。我把数据bs-*选项放在按钮标记后面的嵌套span标记中，点击按钮后它就可以工作了。我可能认为除了span之外的其他标签也应该工作，但我在工作后没有尝试。
<div>
<button type="button">
<span data-bs-toggle="tooltip" data-bs-placement="top">Button Name</span>
</button>
</div>
清除触发器并再现默认行为
const el = document.getElementById('my-tooltip-el');
const tooltip = new bootstrap.Tooltip(el, {
trigger: ''
});
el.addEventListener('mouseover', () => {
tooltip.show();
})
el.addEventListener('mouseleave', () => {
setTimeout(() => tooltip.hide(), 150)
})
我在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（）可能会降低用户体验。我不会那样做的。我发现删除"；数据原始标题"；以及移除属性"0"；数据切换"；以及"；标题"；为我工作。
$(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');
});
});