Jquery获取有关图像映射区域形状的工具提示

我已经开始使用我找到的一些jquery示例为图像地图创建悬停时的自定义工具提示。

<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">

然而，当我将鼠标悬停在图像地图区域上时，它会在屏幕左上角弹出工具提示，而不是鼠标指向的位置附近。对于每个形状，它都显示在相同的位置。

对于其他元素，比如我在图片下面包含的"标签"演示，工具提示就出现在标签上，它应该在哪里

我试着根据我在这里看到的内容添加职位信息，但我添加的任何内容要么无效，要么使代码无效，我一无所获。如果我添加这个职位信息，我看不到任何变化：

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

图像映射区域的工具提示仍然仅显示在整个页面的左上角。当我尝试使用其他位置参数时，它破坏了整个功能，因此没有工具提示。

有什么想法吗？

更新：

即使没有任何位置参数，它也能正确地用于页面上的任何其他元素、输入表单、搜索表单、"编辑"按钮等。jquery工具提示的正确样式会出现，并且它与这些元素相邻，无论它们在页面上的何处。

它只是出现在其他地方的图像地图区域矩形上。因此，它识别的区域形状足以触发工具提示，但不会将工具提示放在它旁边

更新II

我发现jsquery小部件似乎只在block元素上正确运行（并且area不是块元素），然后偶然发现了一篇似乎证实了这一点的帖子，请参阅此处的回复#5。。我已经尝试添加CSS样式，将"区域"定义为块元素，在玩了更多的游戏并改变了定位之后，我想出了一个可行的方法：

<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>

这将工具提示放在图像的中心，这很好，我不需要它们正好位于用户单击的位置，只是可见，而且不太远。我不知道为什么它需要负675，但它是有效的。