TheRealPapa TheRealPapa - 3 months ago 58
jQuery Question

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.

Answer

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