Bootstrap popover INFO Bubble

Bootstrap popover INFO Bubble

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<i id="pop1" class="icon-question-sign pop"></i>
<img src="http://placehold.it/150x150" class="img-polaroid">

<div id="pop1_content" class="popSourceBlock">
  <div class="popTitle">
    Andrew Pougher
  </div>
  <div class="popContent">
    <p>I personally love Preraphaelite paintings<strong> like Rosetti</strong>. Truth to nature and all that.</p>
  </div>
</div>


<i id="pop2" class="icon-question-sign pop"></i>

<img src="http://placehold.it/150x150" class="img-polaroid">
<div id="pop2_content" class="popSourceBlock">
  <div class="popTitle">
    Mr Andrew Pougher, to you
  </div>
  <div class="popContent">
    <p>I am <strong>Andrew Pougher</strong> and you can of course google me. Who hasn't ;)</p>
  </div>
</div>

CSS

body {
  margin: 100px
}

.popSourceBlock {
  display: none;
}

JavaScript

$(".pop").each(function() {
  var $pElem = $(this);
  $pElem.popover({
    title: getPopTitle($pElem.attr("id")),
    content: getPopContent($pElem.attr("id"))
  });
});

function getPopTitle(target) {
  return $("#" + target + "_content > div.popTitle").html();
};

function getPopContent(target) {
  return $("#" + target + "_content > div.popContent").html();
};