> > jQuery Smart Tooltips

jQuery Smart Tooltips

jQuery Smart Tooltips - Part 1
jQuery Smart Tooltips - Part 2
jQuery 為核心的工具提示功能
檔案小
使用方式也簡單
只要在連結中加入 title 屬性即可

<!--
如果能夠像 Mootools Demos - Tips 那樣
可分為說明主題與說明內容就更完美了
-->

套用到 HTML 與 Blogger
(方法一樣 不需做個別調整)
1.請先下載 jquery.smart-tooltips 檔案
 由於是以 jQuery 為核心
 所以同時也要記得引用 jQuery
 目前最新的版本是 jQuery1.3.2
 不過在此我使用的版本是 jQuery1.2.6
 然後在 <head> 跟 </head> 裡插入以下程式碼
 ( Blogger 則是找到 </b:skin> 跟 </head> )
<script type="text/javascript" src="上傳到網路空間的jquery-1.2.6.pack.js" ></script>
<script type="text/javascript" src="上傳到網路空間的jquery.small-tooltip.js" ></script>
<!--
下面的檔案是一樣的
只是檔案大小有所不同
請擇一使用
jQuery Regular (97.8 kb)
jQuery Minified (54.5 kb)
jQuery Packed (30.3 kb)
-->

2.在 <head> 跟 </head> 或是 CSS 樣式檔案中插入以下 CSS 程式碼
 然後修改成自己想要的 CSS 樣式
.tooltip{
position:absolute;
z-index:999;
left:-9999px;
background-color:#dedede;
padding:5px;
border:1px solid #fff;
width:250px;
}

.tooltip p{
margin:0;
padding:0;
color:#fff;
background-color:#222;
padding:2px 7px;
}

3.在連結內加上 title 屬性即可
<a href="連結網址" title="說明文字" ></a>