title: image Map with Bootstrap Tooltips not showing in correct spot
body: <p>I have an image map and I would like to use the built-in tooltips provided by Bootstrap when a user hovers over a specific part of that image. </p>
  
  <p>The issue I'm having is that the tooltip does not show up in the right place. Right now it shows at the top left corner of the image for all areas of the image map.</p>
  
  <p>How can I move the tooltips under their respective areas without having to reposition each tooltip individually? It should automatically be within the rec defined. </p>
  
  <p>Here is the map code I am using:</p>
  
  <pre><code>&lt;img id="Image-Maps-Com-process-map" src="images/osh drawing.png" border="0" width="600" height="600" orgWidth="600" orgHeight="600" usemap="#process-map" alt="" /&gt;
  &lt;map name="process-map" id="ImageMapsCom-process-map"&gt;
  &lt;area  alt="" title="Wood Burning Stove" href="#" class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="478,186,572,296" style="outline:none;" target="_self"     /&gt;
  &lt;area  alt="" title="Rough Cut Lumber" href="#" class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="184,1,395,148" style="outline:none;" target="_self"     /&gt;
  &lt;area  alt="This is the description maybe" title="Distributing" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="45,398,304,577" style="outline:none;" target="_self"  /&gt;
  &lt;area  alt="" title="Shipping Materials" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="9,52,141,183" style="outline:none;" target="_self"     /&gt;
  &lt;area  alt="" title="Sawdust" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="302,311,410,385" style="outline:none;" target="_self"     /&gt;
  &lt;area  alt="" title="Electricity" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="430,0,570,113" style="outline:none;" target="_self"     /&gt;
  &lt;area  alt="manufacturing" title="Manufacturing" href="#"class="tooltip-bot" data-original-title="Title text here" shape="poly" coords="348,193,213,197,188,313,221,368,296,362,300,310,357,302,363,193" style="outline:none;" target="_self"     /&gt;
  &lt;/map&gt;
  </code></pre>