我在做这个jQuery工具提示行为有问题吗？

（编辑）当前行为没有显示悬停的工具提示。不是默认的HTML标题或jQuery工具提示（/编辑）我在做这个jQuery工具提示行为有问题吗？

我在网页上有一个日历。当一天有一个事件并将鼠标悬停在上面时，html title属性将显示包含以逗号分隔的事件名称。当一天有20个事件时，这会开始看起来很丑陋，所以我想用jQuery以不同的方式显示。这里是我用来显示工具提示的代码（我遇到了使用$ for jQuery的问题，因为我不明白页面上其他jQuery脚本之间的冲突以及全部输入它似乎正常工作）：

jQuery(function(){ 
     var tip = jQuery("#tip"); 

     //on hover of links with a class of "eventful" 
     jQuery(".eventful a").hover(function(e){ 

      //pull the title attribute into variable "tip" 
      tip.text(jQuery(this).attr("title")); 

      //make the default title blank 
      jQuery(this).attr("title", ""); 

      //place the new title with css 
      tip.css("top",(e.pageY+5)+"px") 
       .css("left",(e.pageX+5)+"px") 
       .fadeIn("slow"); 

     }, function() { 
       //on mouse out remove 
       jQuery("#tip").fadeOut("fast"); 

       //replace the default title 
       jQuery(this).attr("title", tip.html()); 
     }); 
    });

这不起作用，所以我不知道我在那里做错了什么。但是在获得显示的工具提示之后，我需要更改显示多个逗号分隔事件的方式，最好将其更改为无序列表。我有下面这个片段，可能会或可能不会将项目分成一个数组，在每个逗号分隔字符串：

var titleArray = $（“。eventful”）。attr（“title”）。split （ “”）;

如果确实有效，我不确定如何合并它，并将其纳入ul。非常感谢在此提供帮助！

来源

2011-04-08 Jarrod

看起来很完美。 http://jsfiddle.net/XgqZG/ 你是否收到任何JS错误。 – 2011-04-08 16:51:07

tip div应该有position:absolute style &它的z-index应该大于页面中的其他元素。添加jQuery("#tip").css('z-index',somehighvalue)

来源

2011-04-08 17:39:28

帮助，谢谢。我认为，现在我的问题与定位有关。这个div包含在一个小部件区域内，我相信使用pageY和pageX会导致div远离小部件区域边界，因此不可见。有没有方法来定位div而不使用pageY和pageX？我正在使用的网站位于dev.adabible.org，日历位于主页的左下角。感谢您的帮助。 – Jarrod 2011-04-09 19:17:46

重新审视这个问题之后，我意识到我不应该将我的#tip div放在我的小工具区域内。我把它放在外面，现在事情完美了。谢谢！你有没有关于如何将一系列物品变成无序列表的建议？ – Jarrod 2011-04-10 04:33:50

更新了jsFiddle，试试看。 http://jsfiddle.net/cfmitrah/NXMqy/ – 2011-04-10 06:36:06

我在做这个jQuery工具提示行为有问题吗？

回答

相关问题