HTML inside Twitter Bootstrap popover – Dev

The best answers to the question “HTML inside Twitter Bootstrap popover” in the category Dev.


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

      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>


you can use attribute 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>


You cannot 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 you how to create bootstrap popover.

Relevant parts of the code is below:


Note: Popover content is read from "data-content" and "title" tags.
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>


    // Enables popover

And by the way, 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.

Here is the link to the complete spec:
Bootstrap Popover


If for some reason you don’t like or cannot read content of a popup from the data-content and title tags. You can also use e.g. hidden divs and a bit more JavaScript. Here is an example about that.


You need to create a popover instance that has the html option enabled (place this in your javascript file after the popover JS code):

$('.popover-with-html').popover({ html : true });


Another way to specify the popover content in a reusable way is to create a new data attribute like data-popover-content and use it like this:


<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
  <div class="popover-heading">
    This is the heading for #1

  <div class="popover-body">
    This is the body for #1


        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();

This can be useful when you have a lot of html to place into your popovers.

Here is an example fiddle: