Bootstrap 的工具提示不会在按钮点击和鼠标离开后消失

我对引导程序的工具提示有一个问题: 当我单击一个按钮时，即使光标在按钮外面，工具提示也会保持不变。我已经查看了手册-引导程序的工具提示，如果我点击按钮，我看到了同样的问题。有什么解决办法吗？刚刚试用了最新的 FF IE。

109712 次浏览
小开
最佳答案

这是因为没有设置 trigger。触发器的默认值是 'hover focus'，因此在单击一个按钮之后，工具提示仍然可见，直到单击另一个按钮，因为该按钮是 focused。

因此，您所要做的就是将 trigger定义为仅 'hover'。下面的示例与单击按钮后没有持久化工具提示而链接到的示例相同:

$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
})

小提琴中的 doc 示例-> 翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳 http://jsfiddle.net/vdzvvg6o/

小开

在我的案例中，这个问题只在 Internet Explorer 中重现，不管是哪个元素(input、 div 等等)。.)有工具提示-如果单击-工具提示仍然显示。

在网上找到了一些建议的解决方案。在元素上隐藏()工具提示单击事件-但是这是一个坏主意-回到同一个元素-保持它隐藏..。 对我来说

$('.myToolTippedElement').on('click', function () {
$(this).blur()
})

制造了所有的魔力! ! !-在哪里。 myToolTippedElement 是一个元素，它有一个工具提示当然..。

小开

我知道它已经有一年多了，但是我无法让它与这里的任何例子一起工作。我不得不使用以下方法:

$('[rel="tooltip"]').on('click', function () {
$(this).tooltip('hide')
})

这也将在鼠标悬停时再次显示工具提示。

小开

尝试使用 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’) . 工具提示({ 触发器: “悬停” });

这肯定会删除卡住的工具提示。

小开

大卫上面的回答帮助解决了我的问题。 我有两个悬停和点击事件的按钮。MAC 上的 Firefox 确实如我所愿。也就是说，悬停时显示工具提示，单击时不显示工具提示。 在其他浏览器和操作系统上，当我单击时，工具提示将显示并保持显示状态。即使我移动鼠标到其他按钮悬停。 这就是我所拥有的:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true});

这就是解决办法:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'});
小开

嗨，我对这个问题没有什么解决方案。当其他解决方案不起作用的时候，试试这个:

$('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');
});

这也是拖放的解决方案。 所以我希望这能帮到某人:)

小开

我正在 cycle.js 中使用 bootstrap 工具提示，以上所有工具都不适合我。

我必须这么做:

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'
}) ;


});

我是动态禁用保存按钮，然后问题是。

小开

我修复这个问题的方法是使用以下代码删除 click 事件函数中的工具提示:

$("#myButton").on("click", function() {
$("div[role=tooltip]").remove();
});
小开

还可以添加:

onclick="this.blur()"
小开

这个办法对我很有效。

$('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');
});

小提琴

我尝试了前面答案中给出的大部分解决方案，但没有一个对我有用。

小开

我的问题是在数据表。下面的代码为我工作。

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');
});
}
小开

你也可以使用下面的方法来隐藏 离开上的工具提示，如下所示:

jQuery("body").on("mouseleave", ".has-tooltip", function(){
jQuery(this).blur();
});
小开

使用 bootstrap 4和 jquery 我发现了这个，它工作得很好。我使用处置，因为它销毁不隐藏工具提示。

  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');
});
}
小开

对我来说，这就是解决之道:

beforeDestroyingElement() {
$('[data-toggle="tooltip"]').tooltip('hide');
}

我没有遵守 Bootstrap 医生的规定:

在从 DOM 中删除相应的元素之前，必须隐藏工具提示。

小开

工作解决方案

$(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>
小开

你也可以使用这种方式为旧版本，因为接受的答案不适合我，我写这个代码为我自己和它的工作。

$(document).on('mousedown', "[aria-describedby]", function() {
$("[aria-describedby]").tooltip('hide');
});
小开

如果有人想要设置一个工具提示，它将显示一段时间后点击，这里是我是如何做的:

$('[data-toggle="tooltip"]').tooltip({
trigger : 'click'})


$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})
小开

使用强制模糊()可以降低用户体验。我不会那么做的。我发现删除“ data-first-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');
});
});
小开

我在 iPhone 和 Safari 上使用 Bootstrap 4时遇到了这个问题。

在 PC/桌面上，这个工具提示非常有效。 但是当用 iOS14查看 iPhone 时，点击/点击按钮后，工具提示仍然可见。也是当隐藏层。

对我来说，添加这段代码解决了 iPhone 上的问题:

jQuery('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
});


jQuery('[data-toggle="tooltip"]').on("click", function () {
$(this).tooltip("hide");
});
小开

用5号引导器

工具提示现在用普通/普通的 Javascript 初始化。因为我在这里只看到了 JQuery 选项，所以让我用简单的 JS 发布 VERY SIMPLE 和直接的方法:

//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'
});
});

您只需要添加“{ touch: ‘ hover’}”对象作为 bootstrap.Tooltip (元素，选项)的一个选项。

资料来源: https://getbootstrap.com/docs/5.1/components/tooltips/#usage

小开

对我来说，只有当我输入这个代码时才有效。


$("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');
});
小开

如果没用，试试这个。 * 单击按钮或任何有工具提示的元素时执行。

let tooltip = document.getElementsByClassName("tooltip");
tooltip[0].parentNode.removeChild(tooltip[0]);
小开

如果上述多重解决方案/建议不起作用。我将 data-bs-* 选项放在按钮标记之后的嵌套 span 标记中，它在按钮单击之后工作。我可能认为除 span 之外的其他标记也应该可以工作，但是在我让它工作之后我没有尝试。

<div>
<button type="button">
<span data-bs-toggle="tooltip" data-bs-placement="top">Button Name</span>
</button>
</div>

提交答案