我对bootstrap的工具提示有问题：单击按钮时，即使光标在按钮外部，工具提示也会保留。我查看了手册-Bootstrap的工具提示，如果单击按钮，也会遇到同样的问题。有解决此问题的解决方案吗？刚在最新的FF，IE中尝试过。
Answers:
这是因为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');
});这也是拖放的解决方案。所以我希望这可以帮助某人:)
在我的情况下，该问题仅在Internet Explorer中重现：无论哪个元素（输入，div等...）都有工具提示-如果单击，则仍显示工具提示。
在网上找到了一些建议使用.hide（）解决方案的解决方案，该解决方案是对元素Click事件的提示-但这不是一个好主意-将鼠标悬停在同一元素上-将其隐藏起来...就我而言
$('.myToolTippedElement').on('click', function () {
$(this).blur()
})成就了一切!!!!-其中.myToolTippedElement是具有课程提示的元素...
在带有引导程序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');
});
}在我的情况下，尝试使用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（{触发器：'悬停'}）;
这肯定会消除卡住的工具提示。
大卫在上面的回答有助于解决我的问题。我在按钮上同时悬停和单击事件。MAC上的Firefox确实表现出了我想要的效果。也就是说，悬停时显示工具提示，不显示单击的工具提示。在其他浏览器和操作系统上，当我单击时，工具提示将显示并保持显示状态。即使我将鼠标移至其他按钮进行悬停。这就是我所拥有的：
$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true}); 解决方法是：
$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'}); 您还可以添加：
onclick="this.blur()"我在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'
}) ;
});我当时动态禁用了保存按钮，然后问题出了。
在文档准备功能内部使用此
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
});
});这个解决方案对我有用。
$('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');
});我尝试了先前答案中给出的大多数解决方案，但没有一个对我有用。
我的问题是在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');
});
}
您还可以使用以下方法在mouseleave上隐藏工具提示，如下所示：
jQuery("body").on("mouseleave", ".has-tooltip", function(){
jQuery(this).blur();
});