使用 clueTip plugin 的注意事項

clueTip 是一個相當實用的 jQuery tip 外掛。在使用上有一些要注意的地方：

1. clueTip 並不是呼叫後就會顯示工具提示；跟其它的 tips library（如 Walter Zorn 的 DHTML Tooltips）在使用上的概念有差異。我們不需要將它放在 mouseover 或是滑鼠其它事件中。其會自動的 bind 到指定的 HTML 標籤上。
2. clueTip API 中的 onActivate: 的目的是要決定是否要顯示 tip；傳給 onActivate 的是 function 參考，該 function 可以依情況決定要回傳 true（表示顯示工具提示）或 false（不顯示）
3. 若是 titleAttribute bind 到的 attribute 是動態決定的，記得要在 bind 到的 attribute 值設定前，將值先設定好，才對該 HTML 標籤呼叫 clueTip();！否則可能會出現滑鼠第一次移動到該 HTML 標籤時，並未正確顯示，第二次移到標籤上，才正常顯示（第一點似乎也可能造成這個問題）

jQuery 相關教學連結

• jQuery Tutorials for Designers

jQuery 筆記：用 jQuery 快速選取元素

完整的文件可以參考官方網站。以下摘錄重點：

$("div").addClass("special");

$ 記號是 jQuery 的物件（其實是 jQuery 函數的縮寫），使用 $("div") 就是用 jQuery 來選取元素，這個範例可以選取文件內所有的 <div> 元素。後面接著的 .addClass("special") 就是用來做一些事情，這個範例是將先前所選取到的所有元素都加上一個名為 "special" 的 class。也就是透過 $("div").addClass("special") 的語法，可以一次幫文件上有的 <div> 元素都加入 special 的 class。

這和原本使用 JavaScript 來寫程式有很大的差異，原本自己寫可能會需要用到迴圈之類的語法，而 jQuery 的函數大多具有批次處理的功能！ $ 記號 $ 是使用 jQuery 過程中最重要的函數，可以用來用來找元素；使用方式只要把參數帶入即可。下面的範例，結果將會和上面的範例一模一樣：

jQuery("div").addClass("special");

如前述，$ 是 jQuery 函數的縮寫。

選取元素

前面的例子使用 $("div") 來選取元素，帶入的參數 div 表示要找的元素，這是 CSS 選擇器（CSS Selector）的語法，如同 CSS 在做排版和外觀所使用的選擇器語法一樣。jQuery 所支援的 CSS Selector 包含了 CSS 1、CSS2 以及仍未正式發佈的 CSS3，透過 plugin 還可支援常用的 XPath 語法。

這是一段原始的 HTML： <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 以下用一連串的範例，以展示基本的語法與文件中會被選取的元素。

$("#body")

• 選取到：<div id="body">
• 解釋：選取 id 為 body 的元素

---

$("div#body")

• 選取到：<div id="body">
• 解釋：選取 id 為 body 的 <div>

---

$("div.contents p")

• 選取到：<p>...</p><p>...</p>
• 解釋：選取 class 為 contents 的 <div> 元素所包住的所有下層的 <p>

---

$("div > div")

• 選取到：<div class="contents">
• 解釋：選取被 <div> 包住的下一層 <div>

---

$("div:has(div)")

• 選取到：<div id="body">
• 解釋：選取至少有包住一個 <div> 的 <div>

---