单击后关闭工具提示

Question

我正在使用 Bootstrap 本机工具提示。

我有一个 link，使用此 jQuery 代码将鼠标移到它上面时会显示工具提示：

jQuery(document).on('hover', '#mylink', function(event)
{
    event.preventDefault();
    jQuery('[data-toggle="tooltip"]').tooltip();
});

但是，在我单击打开新 window 的 link 后，工具提示仍然可见。

如何使用 jQuery 在单击事件后关闭工具提示？

Answer 1

您可以使用dispose方法来销毁工具提示

jQuery('[data-toggle="tooltip"]').tooltip('dispose')

临时禁用工具提示 disable method later you can re-enable using enable 方法。

jQuery('[data-toggle="tooltip"]').tooltip('dispose');

要隐藏，请在工具提示中使用 hide 方法。

jQuery('[data-toggle="tooltip"]').tooltip('hide');

更新 1： 现在将它与特定 link 的点击事件处理程序结合起来。除了触发 blur 事件（因为它可能仍处于焦点状态）以隐藏弹出窗口。

jQuery(document).on('click', '#mylink', function() { 
    jQuery('[data-toggle="tooltip"]').tooltip('hide').blur(); 
});

或者甚至只是触发模糊事件对你有用，因为它由于聚焦而仍然处于活动状态。

jQuery(document).on('click', '#mylink', function() { 
    jQuery('[data-toggle="tooltip"]').blur(); 
});

更新 2： 或者仅通过设置触发选项来限制 hover 上的弹出窗口触发。

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

Turn off tooltip after clicking