Twitter Bootstrap Tooltip: flickers on mouse down

Question

I am dealing with some weird behavior of bootstrap's tooltip.

Versions of ASP.Net and Bootstrap:

ASP.Net 4.5

Boostrap 3.0.0

Scenario:

I'm working on my webapp in which I need to use Bootstrap tooltip on button. Every thing is working fine but I feel that tooltip is flickering when my mouse down event is fired. Here is the gif:

My question is how I prevent this flickering of tooltip on mouse down event in my ASP.Net webapp using jquery or whatever css hint?

What I've tried before is

Github ref#1 Github ref#2

.tooltip { pointer-events: none; } .tooltip { pointer-events: none; } container="body

but none of them worked in my case. Also I've share here my Bundle.config file in which you can see the alignment of my bootstrap and custom css files.

<bundles version="1.0">
    <styleBundle path="~/Content/css">
        <include path="~/Content/bootstrap.css" />
        <include path="~/Content/chosen.css" />
        <include path="~/Content/Site.css" />
        <include path="~/Content/font-awesome.css" />
        <include path="~/Content/AutoComplete.css" />
        <include path="~/Content/GridView.css" />
        <include path="~/Content/custom.css" />
    </styleBundle>
</bundles>

in my site master page I put below jquery in the end of my page:

$('[data-toggle="tooltip"]').tooltip({ container: 'body' });

and put this css in my custom css file

.tooltip { pointer-events: none !important; } .popover { pointer-events: none !important; }

Now please tell me what I'm doing wrong or What is the right way to prevent this flickering on mouse down event.

Answer 1

I had similar odd behavior from Bootstrap in a Visual Studio ASP.NET application. If Bootstrap was installed as part of your project (it probably was), try removing the NuGet package and reinstalling it. Whilst you do that, I recommend upgrading Bootstrap to version 3.3.7 or newer.

Answer 2

This is resolved from here

I put below code in my master page and this solve my problem.

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