Bootstrap popover html content

j-query to show html content in popover on clicking a link

by vishnu nagarajan

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- 
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>

CSS

body {
    padding: 40px 20px;
}

.hidden {
  display: none;
}

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();
        }
    });
});