title: jQuery UI - tooltip position is wrong
body: <p>I am using jQuery tooltip to create html tooltips for an image map. However when the hover happens, the tooltips appear below the entire image. I would like the tooltip to appear next to the area element. How would I accomplish this? Thanks.</p>
  
  <p>jQuery:</p>
  
  <pre><code>$("#trigger1").tooltip({ 
      items: "area",
      content: "&lt;div class='tooltipContent'&gt;&lt;h3&gt;1896&lt;/h3&gt;&lt;p&gt;Bemidji became a town&lt;/p&gt;&lt;/div&gt;"
  });
  </code></pre>
  
  <p>html (sample):</p>
  
  <pre><code>    &lt;div ice:editable="*" class="top_banner" id="top_banner" style="position: relative;"&gt;
          &lt;img alt="" style="border-width: 0px; border-style: solid;" usemap="#Map2" src="_images/timeline2.jpg" /&gt;
          &lt;map id="Map2" name="Map2"&gt;
          &lt;area id="trigger1" href="#" coords="21,99,12" shape="circle" /&gt;
          &lt;/map&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>live page: <a href="http://www.securitybankusa.com/about-test.htm" rel="nofollow">http://www.securitybankusa.com/about-test.htm</a></p>