Mootools ToolTips實際執行畫面四個分割視窗呈現

很多時候網頁上的元素為了保持乾淨整潔的樣子，所以會少掉了很多說明的文字部分，但是為了可以讓使用者更了解這一個連結或者這一個圖片是做什麼的，這一個功能就是幫助設計師可以保持頁面又可以讓使用者清楚知道圖片或文字的意義。

使用方法：
首先利用Google AJAX API 載入MooTools的框架
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
然後是CSS的樣式設計
<style>
.tool-tip {
color: #fff;
width: 139px;
z-index: 13000;
}
.tool-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(bubble.png) top left;
}
.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(bubble.png) bottom right;
}
.custom-tip {
color: #000;
width: 130px;
z-index: 13000;
}
.custom-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}
.custom-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #CFDFA7;
}
</style>

再來做HTML的表現方式
<h3>Tips 1</h3> <!--基本的呈現樣式-->
<img src="/demos/MousewheelCustom/moo.png" alt="mooCow" class="Tips1" title="Tips Title :: This is my tip content" />
<h3>Tips 2</h3> <!--顯示有做動畫效果-->
<img src="/demos/MousewheelCustom/moo.png" alt="mooCow" class="Tips2" title="Tips Title :: This is my tip content" />
<h3>Tips 3</h3>
固定位置的Tips: <a href="http://www.mootools.net" onclick="return false;" class="Tips3" title="Mootools official website">Mootools.net</a>
<h3>Tips 4</h3>
使用者自訂CLASS: <a href="http://www.mootools.net" onclick="return false;" class="Tips4" title="Mootools official website">Mootools.net</a>

最後加入JavaScript的部份就完成了
<script type="text/javascript">
window.addEvent('domready', function(){
  var Tips1 = new Tips($$('.Tips1'));  //基本的表現方式
  var Tips2 = new Tips($$('.Tips2'), {
initialize:function(){ //500毫秒的時間淡出淡入
 this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
 this.fx.start(1);
},
onHide: function(toolTip) {
 this.fx.start(0);
}
  });
  var Tips3 = new Tips($$('.Tips3'), {
showDelay: 400, //顯示訊息的延遲時間 毫秒為單位
hideDelay: 400, //關閉訊息的延遲時間 毫秒為單位
fixed: true //固定位置
  });
  var Tips4 = new Tips($$('.Tips4'), {
className: 'custom' //自訂樣式的樣式表名稱
  });
});
</script>


作者網站：http://mootools.net/
檔案大小：94 KB
檔案下載：http://mootools.net/download
檔案備份：下載