CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-popover
TheRealPapa
TheRealPapa

Reputation: 4539

Bootstrap popover close button

FIDDLE HERE

I am adding a close x button to bootstrap 3 popovers but I am stuck getting it to work. I have tried various answers from this forum but have not been successful.

My popup code is:

// Popover Menu initialize
$('.btn-row-popup-menu').popover({
    placement: 'left',
    trigger: 'click',
    html: true,
    title: function() {
        return $(this).parent().find('.btn-row-popup-menu-head').html();
    },
    content: function() {
        return $(this).parent().find('.btn-row-popup-menu-body').html();
    },

}).on('show.bs.popover', function(e) {
    if (window.activePopover) {
        $(window.activePopover).popover('hide')
    }
    window.activePopover = this;
    currentPopover = e.target;

}).on('shown.bs.popover', function(e) {
    var currentPopover = $(this);
    currentPopover.find('.close').click(function(e) {
        $(this).popover('hide');
    });

}).on('hide.bs.popover', function() {
    window.activePopover = null;
});

What have I missed? Thanks.

Upvotes: 1

Views: 3351

Answers (1)

vivekkupadhyay
vivekkupadhyay

Reputation: 2891

Changing your jQuery to this will help you achieve what you are seeking as:

 $('[data-toggle="popover"],[data-original-title]').each(function() {
   //the 'is' for buttons that trigger popups
   //the 'has' for icons within a button that triggers a popup
   var target = $(e.target);
   if (!target.is('.popover') && !target.is('.popover *') && !target.is('.btn-row-popup-menu') || target.is('.btn-popover-close')) {
     (($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false;
   }
 });

Here's your updated JSFiddle

Upvotes: 1

Related Questions