Tout d'abord, si vous souhaitez utiliser HTML dans le contenu, vous devez définir l'option HTML sur true:
$('.danger').popover({ html : true});
Ensuite, vous avez deux options pour définir le contenu d'un Popover
- Utilisez l'attribut data-content. Ceci est l'option par défaut.
- Utilisez une fonction JS personnalisée qui renvoie le contenu HTML.
Utilisation du contenu de données : vous devez échapper au contenu HTML, quelque chose comme ceci:
<a class='danger' data-placement='above'
data-content="<div>This is your div content</div>"
title="Title" href='#'>Click</a>
Vous pouvez échapper manuellement au code HTML ou utiliser une fonction. Je ne connais pas PHP mais dans Rails, nous utilisons * html_safe *.
Utilisation d'une fonction JS : Si vous faites cela, vous avez plusieurs options. Le plus simple, je pense, est de mettre votre contenu div caché où vous le souhaitez, puis d'écrire une fonction pour transmettre son contenu au popover. Quelque chose comme ça:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
Et puis votre HTML ressemble à ceci:
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>
J'espère que ça aide!
PS: J'ai eu quelques problèmes lors de l'utilisation du popover et de la non-définition de l'attribut title ... alors, n'oubliez pas de toujours définir le titre.