Bootstrap .popover() 'show' & 'destroy' not working properly

Question

When I use the bootstrap popover in \'manual\' mode \'destroy\' and \'hide\' not working properly. When I\'m using hide and destroy, popover opacity changing to 0 but its not ch

Answer 1

Work's for bootstrap popover

<span class="pop-target">
      <a href="javascript:void(0);" rel="popover"........> </a>
    </span>



  $(".pop-target a").popover('hide');

Answer 2

I have fixed it by adding this in css file:

.popover.fade{z-index:-1;}

.popover.in{z-index: inherit}

Answer 3

If you were using a custom build of Bootstrap, the destroy event won't work if you didn't check off "transitions" in the JS section and are testing in a browser that supports transitions. This is because Bootstrap looks at $.support.transition in jQuery. If this value is "truthy", Bootstrap assumes there will be a transitionEnd event of some sort and won't detach the popover until this event is received. But Bootstrap uses custom events defined in their transitions library so the transitionEnd call will never be triggered. If you don't want to re-download the customized library, the transitions code is here: transition code

Answer 4

If you're wanting to hide the popover use this instead:

$('.inputInfo').filter('[data-info-id="' +i.data('info-id')+ '"]').click();

Answer 5

My temporary solution look like this:

I'm using:

$('.popover').remove();

to remove popovers

and

$('body').on('click' , '[rel="popover"]' , function(e){
    e.stopPropagation();

    var i = $(this);
    var thisPopover = $('.popoverClose').filter('[data-info-id="' +i.data('info-id')+ '"]').closest('.popover');        
    if( thisPopover.is(':visible') ){
        $('.popover').remove();
    }
    else{
        $(this).popover('show');
    }
});

to toggle popovers

Answer 6

//Works for hover events:

$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').mouseleave(function(e) {
    e.stopPropagation();
    $(this).find('.popover').remove();
 });