TheRealPapa TheRealPapa - 1 year ago 386
jQuery Question

Bootstrap popover close button


I am adding a close

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
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('', function(e) {
if (window.activePopover) {
window.activePopover = this;
currentPopover =;

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

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

What have I missed? Thanks.

Answer Source

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 = $(;
   if (!'.popover') && !'.popover *') && !'.btn-row-popup-menu') ||'.btn-popover-close')) {
     (($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false;

Here's your updated JSFiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download