Javascript 如何在图像地图上创建 html 工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5478940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a html tooltip on top of image map?
提问by Rella
I have the following code:
我有以下代码：
<div style="width:100%" align="center">
<img src="./platform-logos-big.png" alt="Icons of platforms we support: Windows Linux and MacOS X" border="0" align="middle" usemap="#Map">
<map name="Map">
<area shape="rect" coords="0,0,87,100" href="#Linux" alt="Click here to download Linux version of CloudClient">
<area shape="rect" coords="88,0,195,100" href="#Windows" alt="Click here to download Windows version of CloudClient">
<area shape="rect" coords="196,0,300,100" href="#MacOsX" alt="Click here to download MacOsX version of CloudClient">
</map>
</div>
<div class="WTT">
tooltipWin
</div>
<div class="LTT">
tooltipLin
</div>
<div class="MTT">
tooltipMac
</div>
I want to show my pure html tool tips appear on top of mouse and move fllowing it. How to do such thing with jQuery?
我想显示我的纯 html 工具提示出现在鼠标顶部并移动它。如何用 jQuery 做这样的事情？
回答by Billy Moon
Really you should give a common class to all the tooltips, and id to all the elements, but this works against your existing HTML.
实际上，您应该为所有工具提示提供一个通用类，并为所有元素提供 id，但这与您现有的 HTML 相悖。
$('.WTT,.LTT,.MTT').css({
position: 'absolute'
}).hide()
$('area').each(function(i) {
$('area').eq(i).bind('mouseover', function(e) {
$('.WTT,.LTT,.MTT').eq(i).css({
top: e.pageY,
left: e.pageX
}).show()
})
$('area').eq(i).bind('mouseout', function() {
$('.WTT,.LTT,.MTT').hide()
})
})
fiddle here: http://jsfiddle.net/billymoon/BmxR7/
在这里小提琴：http: //jsfiddle.net/billymoon/BmxR7/
回答by Cuse70
Stick a title="your tooltip"on your areatag.
title="your tooltip"在你的area标签上贴一个。
回答by Aleadam
You have different options here:
您在这里有不同的选择：
http://wiki.jqueryui.com/w/page/12138112/Tooltip
http://wiki.jqueryui.com/w/page/12138112/Tooltip
EDIT: This link may help also: http://docs.jquery.com/Plugins/Tooltip#Delay_and_tracking
编辑：此链接也可能有帮助：http: //docs.jquery.com/Plugins/Tooltip#Delay_and_tracking
回答by Ron Richardson
Regarding using jQuery UI for map > area > tooltip, you need to add:
关于使用 jQuery UI 进行地图 > 区域 > 工具提示，您需要添加：
$("area").tooltip({ track: true });
And, the styling:
而且，样式：
.ui-tooltip { }
