在 「
唏嘘一世」的部落格中發現一篇:利用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 就好。