Bootstrap .popover() ‘show’ & ‘destroy’ not working properly

Bootstrap .popover() ‘show’ & ‘destroy’ not working properly

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 changing display to none, which resulting that the popover container cover the content bellow it.
Otherwise if I use ‘toogle’ mode it’s working properly.
My code:
$(‘[rel=”popover”]’).popover({
html: true,
placement: ‘auto’,
container: ‘body’,
trigger: ‘manual’
});

$(‘body’).on(‘click’ , ‘[rel=”popover”]’ , function(e){
e.stopPropagation();
$(this).popover(‘toggle’);
});

$(‘body’).on(‘click’ , ‘.popoverClose’ , function(e){
e.stopPropagation();
var i = $(this);
$(‘.inputInfo’).filter(‘[data-info-id=”‘ +i.data(‘info-id’)+ ‘”]’).popover(‘hide’);
});

// new code
$(‘body’).on(‘click’, function(){
$(‘[rel=”popover”]’).popover(‘hide’);
});

Solutions/Answers:

Solution 1:

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

Solution 2:

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

Related:  Bootstrap : align button text left

Solution 3:

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

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

Solution 4:

Work’s for bootstrap popover

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



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

Solution 5:

I have fixed it by adding this in css file:

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

.popover.in{z-index: inherit}

Solution 6:

//Works for hover events:

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

References