使用 jQuery 實作 Tips 功能

在 「唏嘘一世」的部落格中發現一篇：利用jQuery写的Tips（提示）效果。剛好自己也正想要用 jQuery 重新改寫以前的程式碼，讓時下的瀏覽器都能夠正常顯示。下載作者程式碼測試後，「真是太完美了」。但我的系統尚不能接受太絢麗的介面，因為要走復古風，所以稍微調整了作者的一些版面功能。

先貼作者程式碼的效果：

<style> 
.tool-tips{ position: absolute; visibility: hidden; z-index: 13000; color: #fff; width:200px; } 
.tool-title{ font-size:13px; font-weight:bold; margin: 0; color: #9FD4FF; text-align: center; padding: 6px 6px 4px; background: url(http://www.xixuyishi.com/theme/xixuyishi/bubble.png) top left; } 
.tool-text{ padding: 4px 8px 8px; font-size:12px; color: #cf9; background: url(http://www.xixuyishi.com/theme/xixuyishi/bubble.png) bottom right; } 
</style> 

$(document).ready(function(){
           $('<div class="tool-tips"><div class="tool-title"></div><div class="tool-text"></div></div>').appendTo('body');
           $('abbr,acronym').mouseover(function(){
               $(this).css('cursor','help');
               $('.tool-tips').css('visibility','visible');
               var xixu = this;
               if(xixu.title){xixu.yishi=xixu.title;xixu.title='';}
               var dual = xixu.yishi.split('::');
               if(dual.length>1){
                   myTitle = dual[0];
                   myText = dual[1];
               }else{
                   myTitle = $(this).text();
                   myText = xixu.yishi;
               }
               $('.tool-title').html(myTitle);
               $('.tool-text').html(myText);
           }).mousemove(function(e){
               $('.tool-tips').css('top',e.pageY+15);
               $('.tool-tips').css('left',e.pageX+15);
           }).mouseout(function(){
               $('.tool-tips').css('visibility','hidden');
           })
       }

<abbr title="China">CN</abbr> 
<acronym title="Cascading Style Sheets">CSS</acronym> 

<acronym title="請點選「開始」<BR>移至控制台">說明</acronym> 

我需要的則是：

因為我需要較寬的說明內容，所以將 .tool-tips{width:600px;} 裡的 width 調的大些。.tool-text{color: black; background: #FFFFCC} 則是定義自己想要的背景及字型顏色。最後，我將 $('<div class="tool-tips"><div class="tool-title"></div><div class="tool-text"></div></div>').appendTo('body'); 裡的 <div class="tool-title"></div> 拿掉，只留下 tool-text 就好。