如何在图像映射上创建一个HTML工具提示？

Question

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>

我希望展示我的纯HTML工具提示出现在鼠标的顶部并随其移动。如何使用jQuery实现这样的功能？

- Rella

Answer 1

在你的area标签上添加title="你的提示信息"。

- Cuse70

---

那不允许任何HTML标签 - 只有文字。 - Ed Graham

Answer 2

真正有效的方法是给所有工具提示添加一个共同的类，为所有元素添加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/

- Billy Moon

---

看起来带有win/lin/mac标志更好 - 不过win和lin的位置反了 :) 喜欢偏移量和mousemove更新 - 虽然这可以在绑定时添加到mouseover事件中。我在这里进行了小改动：http://jsfiddle.net/billymoon/X6P9M/ - Billy Moon

改进了 @Rella 的 http://jsfiddle.net/48qd5abu/原始版本在“绝对包装”页面（如主题）中无法正常工作。 - Francesco Cattoni

Answer 3

你在这里有不同的选项：

http://wiki.jqueryui.com/w/page/12138112/Tooltip

编辑：这个链接也可能有帮助：http://docs.jquery.com/Plugins/Tooltip#Delay_and_tracking

- Aleadam

Answer 4

关于使用jQuery UI来制作地图区域提示，您需要添加以下内容：

$("area").tooltip({ track: true });

还有样式：

.ui-tooltip { }

- Ron Richardson