Je devais trouver quelque chose qui fonctionne pour plusieurs popovers et dans Bootstrap 3.
Voilà ce que j'ai fait :
J'avais plusieurs éléments pour lesquels je voulais faire fonctionner un popover, donc je ne voulais pas utiliser d'identifiants.
La majoration pourrait être :
<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>
Le contenu des boutons d'enregistrement et de fermeture à l'intérieur du popover :
var contentHtml = [
'<div>',
'<button class="btn btn-link cancel">Cancel</button>',
'<button class="btn btn-primary save">Save</button>',
'</div>'].join('\n');
et le javascript pour les 3 boutons :
Cette méthode fonctionne lorsque le conteneur est le conteneur par défaut non attaché au corps.
$('.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');
});
});
Lorsque le conteneur est attaché au "corps".
Ensuite, utilisez l'aria-describedby pour trouver la fenêtre contextuelle et la masquer.
$('.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');
});
});
