Jquery用于图像映射区域形状上的工具提示

Question

我已经有了这个工作,使用我发现的一些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部件似乎只在正常运行块元素(和区域不是块元素),然后穿过这似乎证实了这一点后迷迷糊糊,见反应#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,但它确实有效.

Answer 1

我认为你需要添加第一个问题和第二个问题作为选项，也许你在 html 之前position执行，将脚本移动到这里的最后jsfiddle 示例jsjquery

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