I needed to find something that would work for multiple popovers and in Bootstrap 3.
Here's what I did:
I had multiple elements I wanted to have a popover work for, so I didn't want to use ids.
The markup could be:
<button class="btn btn-link foo" type="button">Show Popover 1</button>
<button class="btn btn-link foo" type="button">Show Popover 2</button>
<button class="btn btn-link foo" type="button">Show Popover 3</button>
The content for the save and close buttons inside the popover:
var contentHtml = [
'<div>',
'<button class="btn btn-link cancel">Cancel</button>',
'<button class="btn btn-primary save">Save</button>',
'</div>'].join('\n');
and the javascript for all 3 buttons:
This method works when the container is the default not attached to body.
$('.foo').popover({
title: 'Bar',
html: true,
content: contentHtml,
trigger: 'manual'
}).on('shown.bs.popover', function () {
var $popup = $(this);
$(this).next('.popover').find('button.cancel').click(function (e) {
$popup.popover('hide');
});
$(this).next('.popover').find('button.save').click(function (e) {
$popup.popover('hide');
});
});
When the container is attached to 'body'
Then, use the aria-describedby to find the popup and hide it.
$('.foo').popover({
title: 'Bar',
html: true,
content: contentHtml,
container: 'body',
trigger: 'manual'
}).on('shown.bs.popover', function (eventShown) {
var $popup = $('#' + $(eventShown.target).attr('aria-describedby'));
$popup.find('button.cancel').click(function (e) {
$popup.popover('hide');
});
$popup.find('button.save').click(function (e) {
$popup.popover('hide');
});
});