Bootstrap popover contenu dynamique
Bonjour à tous,
Je dois faire quelques modifications à un projet existant et j'ai quelques soucis à utiliser les popovers (Bootstrap) de façon dynamique.
Voici mon problème:
J'aimerais mettre un popover sur certains éléments qui ne sont pas tous présents lors du chargement de ma page. Par exemple, l'utilisateur complète un petit formulaire et confirme. Une nouvelle ligne apparaît dans ma page avec un nouvel élément sur lequel j'aimerais mettre un popover. Le contenu de ce popover est un noeud frère de l'élement déclanchant le popover (cf. ci-dessous):
Code:
1
2
3
4
5
6
| <div>
<a href='blablabla' rel='popover'>Plus d'infos</a>
<div class='contentPopover'>
blablablabla
</div>
</div> |
Voici les deux solutions que j'ai tentées sans succès.
1. Si je fais de la manière suivante, cela fonctionne très bien pour les éléments présents lors du chargement de la page mais non pour les nouveaux:
Code:
1
2
3
4
5
6
7
8
| $("[rel=popover]").each(function() {
$( this ).popover({
trigger: "hover",
html: "true",
placement: "right",
content: $(this).parent().find(".contentPopover").html()
});
}); |
2. Si je fais comme ci-dessous, j'ai un problème pour "setter" le contenu de mon popover:
Code:
1
2
3
4
5
6
7
| $('body').popover({
trigger: "hover",
html: "true",
selector: "[rel=popover]",
placement: "right",
content: ????
}); |
Comment puis-je, dans le second exemple, référencer le contenu à mettre dans mon popover comme dans le premier exemple?
Ceci est certainement une question méga stupide donc mes sincères excuses à l'avance ^^
Et merci à celui qui pourra m'éclairer.
Slid.
