title: jQuery UI Tooltip, on an image map how can I get the ID of the <area> into the tooltip content
body: <p>I have an image wth mapped areas. Each of the areas has an ID, Coords, etc.. I would like to show the <a href="http://api.jqueryui.com/tooltip/" rel="nofollow noreferrer">jQuery ui tooltip</a> and include the id of the <code>&lt;area&gt;</code> in the tooltip. Here is code in the <code>&lt;head&gt;</code>:</p>
  <pre><code>&lt;script src=&quot;js/jquery-1.11.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;!-- Bootstrap core CSS --&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; /&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap-theme.min.css&quot; /&gt;
  
  &lt;script type='text/javascript' src='js/jquery-ui.min.js'&gt;&lt;/script&gt;
  &lt;link rel='stylesheet' type='text/css' href='css/themes/smoothness/jquery-ui.min.css' /&gt;
  
  $(document).ready(function() {
      $( document ).tooltip(
          {
              content: 'My ID is: ' + this.id,
              track: true
          });
  });
  </code></pre>
  <p>Here is some example html:</p>
  <pre><code>&lt;img src=&quot;map.jpg&quot; usemap=&quot;#coord&quot; alt=&quot;a map&quot; /&gt;
  &lt;map id=&quot;coord&quot;&gt;
      &lt;area shape=&quot;rect&quot; coords=&quot;0,0,10,10&quot; id=&quot;Z1&quot; title=&quot;zone 1 of 100&quot; /&gt;
      &lt;area shape=&quot;rect&quot; coords=&quot;11,0,20,10&quot; id=&quot;Z2&quot; title=&quot;zone 2 of 100&quot; /&gt;
  &lt;/map&gt;
  </code></pre>
  <p>What I hope to have the tooltip show in this case is, 'My ID is: Z1' and 'My ID is Z2'.</p>
  <p>Unfortunately the tooltip shows '<strong>My ID is: undefined</strong>' in both cases.</p>
  <p>If I change the <code>this.id</code> to just <code>id</code>, the javascript breaks with message '<strong>ReferenceError: id is not defined</strong>'.</p>
  <p>And using <code>$(this)</code> gives '<strong>My ID is: [object Object]</strong>'. Which leads me to try <code>JSON.stringify($(this))</code> and I get a tooltip looking something like:</p>
  <blockquote>
  <p>My ID is: {&quot;0&quot;:{&quot;location&quot;:</p>
  <p>{},&quot;jQuery111107594155618357165&quot;:1},&quot;context&quot;:</p>
  <p>{&quot;location&quot;:</p>
  <p>{},&quot;jQuery111107594155618357165&quot;:1},&quot;length&quot;:1}</p>
  </blockquote>
  <p>Whoa! I am stumped trying to get that ID.. any help would be greatly appreciated.</p>
  <p>edit: I am trying to get the id into that tooltip function so that I can use ajax to call up some data. I know I could create a hidden div with the info waiting for the onmouseover of the map area, but I would prefer not to load all that data (over a 100 queries) when the typical use will go to a specific area and just need that data. I would make a click function to run it but the map areas are linked and redirect on click.</p>