title: Bootstrap Popover/Tooltip for mapped areas on an Image
body: <p>I'm trying to combine the Bootstrap pack from Twitter and an image that I have mapped out so that portions will--when rolled over--produce a popover/tooltip next to the mapped area. Here's what I've done so far:</p>
  
  <ol>
  <li>I mapped using CSS instead of the old Image Map way. The code is below.</li>
  <li>The image and the areas on it are visible and highlight when rolled over.</li>
  </ol>
  
  <p>Now I've been able to make the popover appear but it is always fixated on the upper left of the image (even when the original image is repositioned).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="ISO-8859-1"&gt;
  &lt;title&gt;Image Map&lt;/title&gt;
  
  &lt;link href="bootstrap/css/bootstrap.css" rel="stylesheet"&gt;
  &lt;link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"&gt;
  &lt;link href="style.css" rel="stylesheet"&gt;
  
  &lt;link href="demo.css" rel="stylesheet"&gt;
  &lt;link href="style_common.css" rel="stylesheet"&gt;
  &lt;link href="style5.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div id="wrapper"&gt;
              &lt;a href="#" id="jon" rel="popover" data-original-title="Milage Rate"
                  data-content="Content..."&gt;&lt;div id="milagerate"&gt;&lt;/div&gt;&lt;/a&gt; &lt;a
                  href="#"&gt;&lt;div id="fairmarketvalue"&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;div
                      id="netassessment"&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;div id="adjustedfmv"&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;div id="exemptions"&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;div
                      id="taxablevalue"&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="jquery-1.7.2.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap/js/bootstrap-tooltip.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap/js/bootstrap-popover.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
              $('#jon').popover({
                  placement : 'bottom'
              });
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@CHARSET "ISO-8859-1";
  
  a {
      color:white;
  }
  
  #wrapper{
      background:white url(PB.jpg) no-repeat 0 0;
      position:relative;
      z-index:0;
      width:530px;
      height:570px;
  }
  
  #milagerate {
      position:absolute;
      width:27px;
      height:17px;
      top:346px;
      left:347px;
  }
  
  #fairmarketvalue {
      position:absolute;
      width:56px;
      height:15px;
      top:319px;
      left:177px;
  }
  
  #netassessment {
      position:absolute;
      width:50px;
      height:17px;
      top:346px;
      left:194;
  }
  
  #adjustedfmv {
      position:absolute;
      width:51px;
      height:17px;
      top:346px;
      left:141px;
  }
  
  #exemptions {
      position:absolute;
      width:51px;
      height:17px;
      top:346px;
      left:245px;
  }
  
  #taxablevalue {
      position:absolute;
      width:51px;
      height:17px;
      top:346px;
      left:295px;
  }
  
  #milagerate:hover, #fairmarketvalue:hover, #netassessment:hover, #adjustedfmv:hover, #exemptions:hover, #taxablevalue:hover {
      border:1px solid red;
  }
  </code></pre>
  
  <p>How do I force the popover to appear next to the mapped areas?</p>