按钮单击和鼠标选项后,Bootstrap的工具提示不会消失

Question

我有一个bootstrap工具提示的问题:当我点击一个按钮时,即使光标在按钮之外,工具提示也会保持不变.我查看了手册 - Bootstrap的工具提示,如果我点击按钮,我会看到同样的问题.有没有解决方法可以解决这个问题？刚尝试了最新的FF,IE.

Answer 1

这是因为trigger未设置.触发器的默认值是'hover focus',因此在单击按钮后工具提示保持可见,直到单击另一个按钮,因为按钮是focused.

因此,所有你需要做的就是定义trigger为'hover'唯一.在单击按钮后链接到的同一示例下面没有持久化工具提示:

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

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

Answer 2

我知道一年多了,但我无法在这里使用任何例子.我必须使用以下内容:

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

这也会在悬停时再次显示工具提示.

Answer 3

使用引导程序 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'}”对象作为 bootstrap.Tooltip(element, options) 的选项。

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

Answer 4

这也可以通过在 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>

Answer 5

在我的情况下,该问题仅在Internet Explorer中重现:无论哪个元素(输入,div等...)都有工具提示 - 如果点击 - 工具提示仍然显示.

在网上发现了一些推荐.hide()的解决方案.元素上的工具提示点击事件 - 但这是个坏主意 - 徘徊在同一个元素上 - 让它隐藏起来...在我的情况下

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

做了所有的魔术! - 其中.myToolTippedElement是有一个工具提示的元素...

Answer 6

嗨,我没有解决这个问题.当其他解决方案不起作用时,请尝试以下方法:

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

这也是拖放的解决方案.所以我希望这有助于某人:)

Answer 7

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

Answer 8

工作方案

$(document).on("click",function()
    {
    setTimeout(function()
    {

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

},500);    // Hides tooltip in 500 milliseconds
    });

Answer 9

我解决此问题的方法是使用以下代码删除单击事件函数中的工具提示：

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