Javascript 单击按钮和鼠标离开后，Bootstrap 的工具提示不会消失

Bootstrap's tooltip doesn't disappear after button click & mouseleave

提问by SilentCry

I have a problem with bootstrap's tooltip : When I click on a button, tooltip stays even if is the cursor is outside of the button. I have looked into the manual - Bootstrap's tooltipand if I'm clicking on the buttons, I see the same problem. Is there any solution to fix this? Just tried in latest FF, IE.

我对引导程序的工具提示有问题：当我单击按钮时，即使光标位于按钮之外，工具提示也会保留。我查看了手册 - Bootstrap 的工具提示，如果我点击按钮，我会看到同样的问题。有没有办法解决这个问题？刚刚在最新的 FF、IE 中尝试过。

回答by davidkonrad

This is because triggeris not set. The default value for trigger is 'hover focus', thus the tooltip stay visible after a button is clicked, until another button is clicked, because the button is focused.

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

So all you have to do is to define triggeras 'hover'only. Below the same example you have linked to without persisting tooltips after a button is clicked :

所以你所要做的就是定义trigger为'hover'only。在单击按钮后没有保留工具提示的情况下链接到的同一示例下面：

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

the doc example in a fiddle -> http://jsfiddle.net/vdzvvg6o/

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

回答by Nitai

I know over a year old, but I couldn't get this to work with any examples here. I've had to use the following:

我知道一岁多，但我无法将其与此处的任何示例一起使用。我不得不使用以下内容：

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

This also shows the tooltip again upon hover.

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

回答by Nienormalny_

Hi i have little solution for this issue. When other solutions doesn't work just try this one:

嗨，我对这个问题几乎没有解决方案。当其他解决方案不起作用时，请尝试以下解决方案：

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

This is solution for drag and drop too. So i hope this help someone :)

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

回答by Kamornik Cola

In my case the issue was reproduced only in Internet Explorer: no matter which element(input, div etc...) has tooltip- if clicked- tooltip remains shown.

在我的情况下，该问题仅在 Internet Explorer 中重现：无论哪个元素（输入、div 等...）有工具提示 - 如果单击 - 工具提示仍然显示。

found some solutions on web that recommends .hide() that tooltip on elements Click event- but it is bad idea- hovering back to the same element - keeps it hidden... in my case

在网络上找到了一些建议 .hide() 元素单击事件的工具提示的解决方案 - 但这是个坏主意 - 悬停回到同一个元素 - 保持隐藏......在我的情况下

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

made all the magic!!!- where .myToolTippedElement is the element that have a tooltip ofCourse...

创造了所有的魔法!!!- 其中 .myToolTippedElement 是具有工具提示 ofCourse 的元素...

回答by user1983909

in angular 7 with bootstrap 4 and jquery I found this and it works fine. I used dispose because it destroys does not hide the tooltip.

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

回答by Alpha

Working Solution

工作解决方案

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

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

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

回答by Sergey Koshkin

Also you can add:

您也可以添加：

onclick="this.blur()"

回答by Jestino Sam

Try using rel="tooltip"instead of data-toggle="tooltip"which worked in my case. I was using data-toggle="tooltip"and also set the trigger condition as hover which didn't work in my case. When I changed my data selector, it worked.

尝试使用rel="tooltip"而不是data-toggle="tooltip"which 在我的情况下有效。我正在使用 data-toggle="tooltip"并将触发条件设置为悬停，这在我的情况下不起作用。当我更改数据选择器时，它起作用了。

HTML Code:

HTML代码：

<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>

JS Code//Tooltip $('.btn').tooltip({ trigger: 'hover' });

JS代码//工具提示 $('.btn').tooltip({ trigger: 'hover' });

This will definitely remove the stuck tooltip.

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

回答by user1322977

David's answer above helped to fix my problem. I had both hover and click event on the button. Firefox on MAC did behave as I wanted. That is, show tooltip when hover, do not show tooltip for click. On other browsers and OS, When I click, the tooltip appear and stay as show. Even if i move the mouse to other buttons for hover. This is what I had:

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

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

This is the fix:

这是修复：

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

回答by soroxis

The way I fixed this issue was by removing the tooltip in the click event function using the following code:

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

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