如何在图像映射之上创建html工具提示？

我有以下代码：

   
 
 tooltipWin 
 
 tooltipLin 
 
 tooltipMac  

我想展示我的纯html工具提示出现在鼠标顶部并移动它。 如何使用jQuery做这样的事情？

Answer 1

实际上，您应该为所有工具提示提供一个公共类，并为所有元素提供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() }) }) 

在这里小提琴： http ： //jsfiddle.net/billymoon/BmxR7/

Answer 2

在area标签上贴上title="your tooltip" 。

Answer 3

你有不同的选择：

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

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

Answer 4

关于使用jQuery UI for map> area> tooltip，您需要添加：

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

而且，造型：

 .ui-tooltip { }