Jquery for tooltip on image map area shapes

Question

I've got this working to create a custom tooltip on hover for an image map, using some jquery examples I found.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<script>
    $(function() {
        $( document ).tooltip();
    });
</script>


<img src="http://blahblahblah" alt="HTML Map" border="0" usemap="#image" class="map"/>

<map name="image">
    <area shape="rect" coords="19, 138, 177, 161" title="Popup Message" />
    <area shape="rect" coords="19, 178, 314, 192" title="Another Popup Message" />
    <area shape="rect" coords="23, 203, 304, 217" title="A Third Popup Message" />
</map>

<label for="userid">Your userid:</label><input id="userid" title="This Popup Message Appears in the Right Place">

When I hover over the image map areas however it pops up the tooltip at the top left of the screen, not near where the mouse is pointing. It appears in the same place for each shape.

For other elements, like the "label" demo I included here below the image, the tooltip appears right at the label, where it should be.

I've tried adding position info based on what I see here, but anything I add either has no effect or it invalidates the code and I get nothing. If I add this position info I see no change:

$( document ).tooltip({ 
    my: "right center", at: "right center" 
}); 

The tooltip for the image map areas still appears only at the top left corner of the entire page. And when I tried using other position parameters it knocked out the whole thing so there were no tooltips.

Any ideas?

UPDATE:

Even without any position parameters, it all functions correctly for any other element on the page, input forms, search forms, the "Edit" button, and so on. The correct style of jquery tooltip appears, and it's adjacent to those elements, no matter where they are on the page.

It's just on the image map area rectangles that it appears elsewhere. So it's recognizing the area shapes enough to trigger the tooltip, but not placing the tooltip adjacent to it.

UPDATE II

I figured out that the jsquery widget only seemed to operate correctly on block elements (and area is not a block element) and then stumbled across a post that seemed to confirm this, see response #5 here.. I had already tried adding CSS style that defined "area" as a block element, and after playing around some more with that and changing positioning quite a bit I came up with something that works:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<style>
   area {
   display: inline-block;
   }
</style>

<script>
    $(function() {
    $( document ).tooltip({position: {at: "center-675 center-450"}});
    });
</script>


<img src="http://blahblahblah" alt="HTML Map" border="0" usemap="#image" class="map"/>

<map name="image">
    <area shape="rect" coords="19, 138, 177, 161" title="Popup Message" />
    <area shape="rect" coords="19, 178, 314, 192" title="Another Popup Message" />
    <area shape="rect" coords="23, 203, 304, 217" title="A Third Popup Message" />
</map>

This puts the tooltips in the center of the image, which is fine, I don't need them to be exactly where the person clicks, just visible and not too far away. I have no idea why it needs to be minus 675, but it works.

Answer 1

I think you need to add position as option first and second problem maybe that you are executing js before html, move jquery script to the end jsfiddle example here

$(function() {
  $( document ).tooltip({ position: { my: "right center", at: "right center" } });
});