我已经开始使用我发现的一些 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 工具提示,它与那些元素相邻,无论它们在页面上的什么位置。
它只是出现在其他地方的图像映射区域矩形上。所以它识别的区域形状足以触发工具提示,但不会将工具提示放在它旁边。
更新二
我发现 jsquery 小部件似乎只能在 block 元素(并且 area 不是 block 元素)上正确运行,然后偶然发现一个帖子似乎证实了这一点,see response #5 here. .我已经尝试添加将“区域”定义为 block 元素的 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,但它有效。
最佳答案
我认为您需要添加 position
作为第一个和第二个问题可能是您在 html 之前执行 js
,将 jquery
脚本移动到结束jsfiddle example here
$(function() {
$( document ).tooltip({ position: { my: "right center", at: "right center" } });
});
关于javascript - jquery for tooltip on image map area shapes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25663606/