entityMap|0|type|LINK|mutability|MUTABLE|data|url|http://jsfiddle.net/vdzvvg6o/|blocks|key|6a33u|text|这是因为trigger未设置。触发器的缺省值为'hover+focus'，因此工具提示在单击一个按钮后保持可见，直到单击另一个按钮为止，因为该按钮是focused..。|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|22fsm|所以你要做的就是定义trigger作为'hover'只有。下面是您链接到的相同示例，但在单击按钮后不保留工具提示：|7gu4h|$('[data-toggle="tooltip"]').tooltip({
++++trigger+:+'hover'
})|code-block|syntax|javascript|1si1f|fiddle+->中的文档示例http://jsfiddle.net/vdzvvg6o/|BOLD^0|4|7|N|D|22|7|0|A|7|J|7|0|0|F|T|F|T|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|W|G|@$H|X|I|Y|J|K]|$H|Z|I|10|J|K]|$H|11|I|12|J|K]]|L|@]|6|$]]|$A|M|C|N|2|E|F|13|G|@$H|14|I|15|J|K]|$H|16|I|17|J|K]]|L|@]|6|$]]|$A|O|C|P|2|Q|F|18|G|@]|L|@]|6|$R|S]]|$A|T|C|U|2|E|F|19|G|@$H|1A|I|1B|J|V]]|L|@$H|1C|I|1D|A|1E]]|6|$]]]]

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

So all you have to do is to define <code>trigger</code> as <code>'hover'</code> only. Below the same example you have linked to without persisting tooltips after a button is clicked :

<pre><code>$('[data-toggle="tooltip"]').tooltip({
 trigger : 'hover'
}) 
</code></pre>

the doc example in a fiddle -> <a href="http://jsfiddle.net/vdzvvg6o/" rel="noreferrer">http://jsfiddle.net/vdzvvg6o/</a>

entityMap|blocks|key|erfnl|text|我知道已经有一年多了，但是我不能在这里的任何例子中让它工作。我不得不使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4m4nr|$('[rel="tooltip"]').on('click',+function+()+{
++++$(this).tooltip('hide')
})|code-block|syntax|javascript|6ok5o|这还会在悬停时再次显示工具提示。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

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:

<pre><code>$('[rel="tooltip"]').on('click', function () {
 $(this).tooltip('hide')
})
</code></pre>

This also shows the tooltip again upon hover.

entityMap|blocks|key|ab1tf|text|嗨，我有这个问题的小解决方案。当其他解决方案不起作用时，试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fhfua|$('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');
++++});|code-block|syntax|javascript|9osmf|这也是拖放的解决方案。所以我希望这对某些人有帮助:)^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

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

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

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

entityMap|blocks|key|4obop|text|在我的例子中，这个问题只在Internet+Explorer中重现:无论哪个元素(input、div等)有工具提示-如果单击-工具提示保持显示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5nlqc|在web上找到了一些解决方案，建议使用.hide()元素上的工具提示单击事件-但这不是一个好主意-悬停在同一个元素上-使其隐藏……在我的情况下|5fmco|$('.myToolTippedElement').on('click',+function+()+{
++++$(this).blur()
})|code-block|syntax|javascript|942lb|创造了所有的魔法！-其中.myToolTippedElement是具有工具提示ofCourse的元素...^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|N|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|O|9|@]|A|@]|B|$]]]]

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.

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 

<pre><code>$('.myToolTippedElement').on('click', function () {
 $(this).blur()
})
</code></pre>

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

entityMap|blocks|key|dflaa|text|在带有bootstrap+4和jquery的angular+7中，我发现了这一点，它工作得很好。我使用dispose是因为它销毁并不隐藏工具提示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|me4m|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');
++++});
+++}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

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.

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

entityMap|blocks|key|2aflp|text|工作解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|938d3|$(document).on("click",function()
++++{
++++setTimeout(function()
++++{

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

},500);++++//+Hides+tooltip+in+500+milliseconds
++++});|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

Working Solution

<pre><code>$(document).on("click",function()
 {
 setTimeout(function()
 {

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

},500); // Hides tooltip in 500 milliseconds
 });
</code></pre>

entityMap|blocks|key|ff8co|text|David上面的回答帮助解决了我的问题。我在按钮上有悬停和点击事件。MAC上的Firefox确实像我想要的那样。也就是说，悬停时显示工具提示，不显示单击时工具提示。在其他浏览器和操作系统上，当我单击时，工具提示会出现并保持显示。即使我把鼠标移到其他按钮上进行悬停。这就是我所拥有的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|534mh|$('[data-toggle="tooltip"]').tooltip({placement:+'right',+html:+true});|code-block|syntax|javascript|bqnm3|修复方法如下：|53qlg|$('[data-toggle="tooltip"]').tooltip({placement:+'right',+html:+true,+trigger:+'hover'});^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|O|9|@]|A|@]|B|$F|G]]]]

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:

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

This is the fix:

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

entityMap|blocks|key|8nqp|text|您还可以添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|e3o6m|onclick="this.blur()"|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

Also you can add:

<pre><code>onclick="this.blur()"
</code></pre>

entityMap|blocks|key|29gb7|text|这也可以通过在HTML中添加以下内容来实现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ovah|data-trigger="hover"

+Text|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

This is also achievable in the HTML by adding the following:

<pre><code> data-trigger="hover"

 &lt;button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here"&gt;Text&lt;/button&gt;
</code></pre>

entityMap|blocks|key|3v7i1|text|尝试使用rel="tooltip"而不是data-toggle="tooltip"这对我来说很管用。我用的是data-toggle="tooltip"|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|drcbt|并且还将触发条件设置为悬停，这在我的情况下不起作用。当我改变我的数据选择器时，它起作用了。|b5bhb|HTML代码：|8r2b9|Submit|code-block|syntax|javascript|3h57b|JS代码//Tooltip+$('.btn').tooltip({+trigger：'hover‘})；|3gima|这肯定会移除卡住的工具提示。^0|4|D|K|L|1I|L|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@$A|U|B|V|C|D]|$A|W|B|X|C|D]|$A|Y|B|Z|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|10|9|@]|E|@]|F|$]]|$2|I|4|J|6|7|8|11|9|@]|E|@]|F|$]]|$2|K|4|L|6|M|8|12|9|@]|E|@]|F|$N|O]]|$2|P|4|Q|6|7|8|13|9|@]|E|@]|F|$]]|$2|R|4|S|6|7|8|14|9|@]|E|@]|F|$]]]]

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

HTML Code:

<pre><code>&lt;button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form"&gt;Submit&lt;/button&gt;
</code></pre>

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

This will definitely remove the stuck tooltip.

entityMap|blocks|key|9gtsg|text|我修复此问题的方法是使用以下代码删除click事件函数中的工具提示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8boa8|$("#myButton").on("click",+function()+{
++++$("div[role=tooltip]").remove();
});|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

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

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

entityMap|blocks|key|brh4j|text|您还可以使用下面的方法将工具提示隐藏在鼠标离开，如下图所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6fd92|jQuery("body").on("mouseleave",+".has-tooltip",+function(){
++++jQuery(this).blur();
});|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

You can also use below method to hide tooltip on mouseleave, As below:

<pre><code>jQuery("body").on("mouseleave", ".has-tooltip", function(){
 jQuery(this).blur();
});
</code></pre>

entityMap|blocks|key|cgdpk|text|同样，你也可以在老版本中使用这种方式，因为被接受的答案对我来说不起作用，我为自己写了这段代码，它工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|621gi|$(document).on('mousedown',+"[aria-describedby]",+function()+{
++++$("[aria-describedby]").tooltip('hide');
});|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

Also you can use this way for old versions because the accepted answer didn't worked for me and I wrote this code for my self and its work well.
<pre><code>$(document).on('mousedown', &quot;[aria-describedby]&quot;, function() {
 $(&quot;[aria-describedby]&quot;).tooltip('hide');
});
</code></pre>

entityMap|blocks|key|fkene|text|我在iPhone和Safari上使用Bootstrap4时遇到了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4dt41|在PC/Desktop上，工具提示运行良好。但在使用iOS+14查看iPhone时，在单击/轻拍按钮后，工具提示仍然可见。隐藏图层时也是如此。|7subs|对我来说，添加以下代码解决了iPhone上的问题：|1n3sg|jQuery('[data-toggle="tooltip"]').tooltip({
++++trigger+:+'hover'
});+

jQuery('[data-toggle="tooltip"]').on("click",+function+()+{
++++$(this).tooltip("hide");
});|code-block|syntax|javascript^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|N|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|O|9|@]|A|@]|B|$J|K]]]]

I had this issue with Bootstrap 4 on iPhone with Safari.
On PC/Desktop, the tooltip is working great.
But when looking on an iPhone with iOS 14, after click / tap on a button, the tooltip remained visible. Also when hiding the layer.
For me, adding this code solved the issue on iPhone:
<pre><code>jQuery('[data-toggle=&quot;tooltip&quot;]').tooltip({
 trigger : 'hover'
}); 

jQuery('[data-toggle=&quot;tooltip&quot;]').on(&quot;click&quot;, function () {
 $(this).tooltip(&quot;hide&quot;);
}); 
</code></pre>

entityMap|blocks|key|5ft0m|text|我使用的是cycle.js中的引导工具提示，上面的工具提示对我来说都不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8uisg|我不得不这么做：|cd7sg|return+button(+selector+%2B+'.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');
}|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

I'm using bootstrap tooltip in cycle.js and none of the above worked for me.

I had to do this:

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

entityMap|blocks|key|cdso8|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|cgsv|$(document).ready(function()+{
+++$('#save').tooltip({
++++++++++++trigger+:+'hover'
++++++++})+;

});|code-block|syntax|javascript|bm4dt|我是动态禁用保存按钮，然后问题是。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

This works for me :

<pre><code>$(document).ready(function() {
 $('#save').tooltip({
 trigger : 'hover'
 }) ;

});
</code></pre>

I was disabling save button dynamically then problem was.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://jsfiddle.net/a4WwQ/2020/|blocks|key|1kcvp|text|这个解决方案对我很有效。|unstyled|depth|inlineStyleRanges|entityRanges|amtrs|$('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');
});|code-block|syntax|javascript|fujpg|fiddle|offset|length|321ug|我尝试了前面答案中给出的大多数解决方案，但没有一个对我有效。^0|0|0|0|6|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|T|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|U|G|@]|H|@]|6|$L|M]]|$A|N|C|O|2|E|F|V|G|@]|H|@$P|W|Q|X|A|Y]]|6|$]]|$A|R|C|S|2|E|F|Z|G|@]|H|@]|6|$]]]]

This solution worked for me.

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

<a href="https://jsfiddle.net/a4WwQ/2020/" rel="nofollow noreferrer">fiddle</a>

I tried most of the solutions given in previous answers, but none of them worked for me.

entityMap|blocks|key|16drj|text|我的问题出在DataTable上。下面的代码适用于我。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5afmb|columnDefs:+[
++++{
++++++++targets:+0,+data:+"id",+
++++++++render:+function+(data,+type,+full,+meta)+{
++++++++++++return+'';
++++++++}
++++}
+],
drawCallback:+function()+{
++++$('[data-toggle="tooltip"]').tooltip();
++++$('[data-toggle="tooltip"]').on('click',+function+()+{
++++++++$(this).tooltip('hide');
++++});
}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

My problem is in DataTable. Below code works for me.
<pre><code>columnDefs: [
 {
 targets: 0, data: &quot;id&quot;, 
 render: function (data, type, full, meta) {
 return '&lt;a href=&quot;javascript:;&quot; class=&quot;btn btn-xs btn-default&quot; data-toggle=&quot;tooltip&quot; title=&quot;Pending&quot; data-container=&quot;body&quot;&gt;&lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;';
 }
 }
 ],
drawCallback: function() {
 $('[data-toggle=&quot;tooltip&quot;]').tooltip();
 $('[data-toggle=&quot;tooltip&quot;]').on('click', function () {
 $(this).tooltip('hide');
 });
}
</code></pre>

entityMap|blocks|key|el8qe|text|在我的例子中，修复是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|a9bfq|beforeDestroyingElement()+{++++
++$('[data-toggle="tooltip"]').tooltip('hide');
}|code-block|syntax|javascript|9ss5g|我没有遵守Bootstrap文档中的规则：|45gev|在从DOM中删除相应的元素之前，必须隐藏工具提示。^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|O|9|@]|A|@]|B|$]]]]

In my case for this was the fix:

<pre><code>beforeDestroyingElement() { 
 $('[data-toggle="tooltip"]').tooltip('hide');
}
</code></pre>

I wasn't obeying this rule from Bootstrap docs:

<blockquote>
 Tooltips must be hidden before their corresponding elements have been removed from the DOM.
</blockquote>

entityMap|blocks|key|c89gs|text|如果有人想要设置一个工具提示，它将在单击后显示一段时间，以下是我是如何做到的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6mk0o|$('[data-toggle="tooltip"]').tooltip({
trigger+:+'click'})++

$('[data-toggle="tooltip"]').on('shown.bs.tooltip',+function+()+{
$(this).tooltip('hide')
})|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

If someone want's to setup a tooltip which will show for some time after click, here is how I did:
<pre><code>$('[data-toggle=&quot;tooltip&quot;]').tooltip({
trigger : 'click'}) 

$('[data-toggle=&quot;tooltip&quot;]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})
</code></pre>

entityMap|blocks|key|5gtp0|text|使用强制模糊()可能会降低用户体验。我不会那么做的。我发现删除"data-original-title“以及删除属性"data-toggle”和"title“对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5vq45|$(id).tooltip('hide');
++++$(id).removeAttr("data-toggle");
++++$(id).removeAttr("data-original-title");
++++$(id).removeAttr("title");|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

Using a forced blur() has the potention to reduce the user experience. I wouldn't do that. I found that removing the &quot;data-original-title&quot; as well as removing the attributes &quot;data-toggle&quot; and &quot;title&quot; worked for me.
<pre><code> $(id).tooltip('hide');
 $(id).removeAttr(&quot;data-toggle&quot;);
 $(id).removeAttr(&quot;data-original-title&quot;);
 $(id).removeAttr(&quot;title&quot;);
</code></pre>

entityMap|blocks|key|d0k4u|text|使用委托使其对ajax友好，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|cda77|//+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');
++});
});|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

Using delegation to make it ajax friendly,
<pre><code>// 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: &quot;[data-toggle='tooltip']&quot;
 });

 // remove old tooltip from sticking on the page when calling ajax with turbolinks
 $('body').on('click', &quot;[data-toggle='tooltip']&quot;, function() {
 $(this).tooltip('dispose');
 });
});
</code></pre>

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 - <a href="http://getbootstrap.com/javascript/#four-directions" rel="noreferrer">Bootstrap's tooltip</a> and 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's tooltip doesn't disappear after button click & mouseleave

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我对bootstrap的工具提示有一个问题:当我点击一个按钮时，即使光标在按钮之外，工具提示也会保持不变。我看过手册了-Bootstrap's tooltip如果我点击按钮，我会看到同样的问题。有什么解决方案可以解决这个问题吗？刚试过最新的FF，IE。

问Bootstrap的工具提示在按钮单击和鼠标退出后不会消失
EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap的工具提示在按钮单击和鼠标退出后不会消失EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap的工具提示在按钮单击和鼠标退出后不会消失
EN