JQuery tooltip over image map

JQuery tooltip over image map

I've managed to modify jquery tooltip using jquery-ui so that I get customized tooltips triggered by image map areas. By default, the tooltip wouldn't trigger on map areas, but it did work on any input forms, edit buttons, etc, on the page. It only functions on block elements I finally realized, so I got it to work by adding a <style> for "area", making that a block element:

  1. </style>
  2. <style type="text/css">
  3. area {
  4. display: inline-block;
  5.     }
  6. </style>


 So now tooltips are triggered when you hover over anything like this:


  1. <area shape="rect" coords="19, 138, 177, 161" title="This Content is displayed in the tooltip." />


The problem is positioning. On any other block element, like an input form, the tooltip appears just where you'd expect, more or less on top of the element, something you can then fine-tune. On the image map areas however it appears in the same place on the page for each one. 


I got it so that all tooltips appear in the center of the image when you hover over the various area shapes, something that may be useful in certain cases. However I'm wondering if there's a way to get it to act the same on these area blocks as it does on other block elements.

Here's the positioning info I have now in the tooltip call, to get it to appear in the center of the image:

  1. <script>
  2. $(function() {
  3. $( document ).tooltip({position: {at: "left-275 top-375", of: "area"}});
  4. });
  5. </script>



And here's what I have in the CSS:

  1.         .ui-tooltip {
  2.         padding: 10px;
  3.         position: absolute;
  4.         z-index: 9999;
  5.         max-width: 300px;
  6.         -webkit-box-shadow: 0 0 5px #aaa;
  7.         box-shadow: 0 0 5px #aaa;
  8.        }

  9.        body .ui-tooltip {
  10.        border-width: 1px;
  11.        color: #FFFFFF;
  12.        background: #454545;
  13.        text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);
  14. }


It seems perhaps as if it's positioning more in relation to the entire image, rather than the blocks. I've tried changing positioning to "relative" in the CSS but that didn't help.


Adding the of: "area" positioning parameter made it so that all the other tooltips appear next to the image also, e.g if you hover over an input form at the top of the page. Removing that parameter means that those other tooltips act normally again, but the ones on image map areas still don't.

Any ideas welcome.