Bootstrap's tooltip doesn't disappear afte

问题:

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 tooltip 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.

回答1:

This is because trigger is 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.

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

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

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

回答2:

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.

回答3:

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

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

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

回答4:

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 :)

回答5:

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.

HTML Code:

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

This will definitely remove the stuck tooltip.

回答6:

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:

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

This is the fix:

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

回答7:

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

I had to do this:

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

回答8:

This works for me :

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

});

I was disabling save button dynamically then problem was.

回答9:

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

回答10:

Also you can add:

onclick="this.blur()"

回答11:

Inside your document ready function use this

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

回答12:

This solution worked for me.

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

fiddle

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

回答13:

My problem is in DataTable. Below code works for me.

columnDefs: [ { targets: 0, data: "id", render: function (data, type, full, meta) { return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>'; } } ], drawCallback: function() { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').on('click', function () { $(this).tooltip('hide'); }); }

回答14:

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

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});