我在做這個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工具提示行爲有問題嗎？

回答

相關問題