Adrian Mojica Adrian Mojica - 5 months ago 107
HTML Question

HTML inside Twitter Bootstrap popover

I am trying to display html inside a bootstrap popover, but somehow its not working. I found some answers here but it won't work for me. Please let me know if I'm doing something wrong.

<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>


Thank you so much.

Answer

You cant use <li href="#" since it belongs to <a href="#" that's why it wasn't working, change it and it's all good.

Here is working jsfiddle which shows two ways to show HTML popover.

Relevant parts of the code is below:

HTML:

<!-- 
Example popover #1 - Takes content of popup from "data-content" and "title" tags.
-->

<a href="#" 
   data-html="true"
   data-toggle="popover" 
   data-content="<div><b>Example popover #1</b> - content</div>" 
   title="<b>Example popover #1</b> - title">Example popover #1</a>

<!-- 
Example popover #2 - Takes content of popup from hidden divs using javascript.
-->

<br />

<a href="#" id="example-popover-2">Example popover #2</a>

<div id="example-popover-2-content" class="hidden">
  <div>
    <b>Example popover #2</b> - content
  </div>
</div>

<div id="example-popover-2-title" class="hidden">
  <b>Example popover #2</b> - title
</div>

JavaScript:

$(function(){
    // Enables popover #1
    $("[data-toggle=popover]").popover();

    // Enables popover #2
    $("#example-popover-2").popover({
        html : true, 
        content: function() {
          return $("#example-popover-2-content").html();
        },
        title: function() {
          return $("#example-popover-2-title").html();
        }
    });
});

CSS:

.hidden {
  display: none;
}

As a final note, you always need at least $("[data-toggle=popover]").popover(); to enable the popover. But in place of data-toggle="popover" you can also use id="my-popover" or class="my-popover". Just remember to enable them using e.g: $("#my-popover").popover(); in those cases.

Cheers.