J'essaie d'afficher du HTML à l'intérieur d'un popover bootstrap, mais cela ne fonctionne pas. J'ai trouvé quelques réponses ici, mais cela ne fonctionne pas pour moi. Veuillez me dire si je fais quelque chose de mal.
<script>
$(function(){
$('[rel=popover]').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
</script>
<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title">
popover
</li>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>
Vous ne pouvez pas utiliser <li href="#"
puisqu'il appartient à <a href="#"
; c'est pourquoi il ne fonctionnait pas, changez-le et tout ira bien.
Voici un [JSFiddle][1] fonctionnel qui vous montre comment créer un popover bootstrap.
Les parties pertinentes du code sont ci-dessous :
HTML:
<!--
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
class="btn btn-lg btn-primary"
role="button"
data-html="true"
data-toggle="popover"
data-trigger="focus"
title="<b>Example popover</b> - title"
data-content="<div><b>Example popover</b> - content</div>">Example popover</a>
JavaScript:
$(function(){
// Enables popover
$("[data-toggle=popover]").popover();
});
Et d'ailleurs, vous avez toujours besoin d'au moins $(" ;[data-toggle=popover]" ;).popover();
pour activer le popover. Mais à la place de data-toggle="popover"
vous pouvez aussi utiliser id="my-popover"
ou class="my-popover"
. Pensez simplement à les activer en utilisant par exemple : $("#my-popover" ;).popover();
dans ces cas-là.
Voici le lien vers la spécification complète : [Bootstrap Popover][2].
Bonus:
Si, pour une raison quelconque, vous n'aimez pas ou ne pouvez pas lire le contenu d'une popup à partir des balises data-toggle
et title
. Vous pouvez également utiliser, par exemple, des divs cachés et un peu plus de JavaScript. Voici un [exemple][3] à ce sujet.
Merci.
[1] :
[2] : http://getbootstrap.com/javascript/#popovers [3] : http://jsfiddle.net/qy9Az/2761/vous pouvez utiliser l'attribut data-html="true"
:
<a href="#" id="example" rel="popover"
data-content="<div>This <b>is</b> your div content</div>"
data-html="true" data-original-title="A Title">popover</a>