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

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

对于其他元素，例如我在图片下方包含的“标签”演示，工具提示会出现在标签的正确位置。

我已尝试根据what I see here添加位置信息，但我添加的任何内容都没有效果，或者它使代码无效，我什么也得不到。如果我添加此位置信息，我认为没有变化：

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

图像地图区域的工具提示仍然只显示在整个页面的左上角。当我尝试使用其他位置参数时，它会敲掉整个事物，因此没有工具提示。

有什么想法吗？

更新

即使没有任何位置参数，它也可以正确地用于页面上的任何其他元素，输入表单，搜索表单，“编辑”按钮等。出现了正确的jquery工具提示样式，无论它们在页面的哪个位置，它都与这些元素相邻。

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

更新II

我发现jsquery小部件似乎只能在块元素上正常运行（并且区域不是块元素）然后偶然发现了一个似乎证实这一点的帖子，{{3} }。我已经尝试添加将“区域”定义为块元素的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

我认为你需要添加position作为选项第一和第二个问题，可能是你在html之前执行js，将jquery脚本移到最后jsfiddle example here

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

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

1 个答案: