上一篇講解了jQuery Tools中Tabs選項卡的用法和示例，本篇繼續以示例的形式講解Jquery Tools中的另兩個組件tooltips（提示工具條）和expose（突出效果）。

• Tooltips（提示工具條）

  Tooltips（提示工具條），就是當把鼠標放在網頁某個元素上時，顯示某個提示信息，用以解釋或提示當前操作。它是改善用戶體驗的一種方式，也是網頁設計中經常用到的。

  下面首先看一個最簡單的應用示例（將鼠標移動到下面圖片上）：

  

  The Tooltip

  提示內容

  HTML代碼:

  <!-- 提示工具條的觸發元素 --> 
  <div id="trigger"> 
      將鼠標移動到我的上面可以看到提示條
  </div> 
   <!-- 定義提示工具條的內容 --> 
  <div class="tooltip"> 
      <h3>The Tooltip</h3> 
      提示內容
  </div>

  Javascript代碼：

  $("#trigger").tooltip();   //為頁面中id為trigger的區域添加tooltip效果

  示例說明：

  1. CSS樣式完全由你控制，這里是上面提示條的css，供你參考
  2. 上面是tooltip最簡單的調用方法，沒有配置任何參數。默認情況下：使用$(elements).tooltip();為頁面所有elements元素綁定tooltip效果；tooltip顯示的內容為elements后面緊跟的節點元素；提示條默認在觸發元素的上方中央位置，以向上滑動的效果出現；
  3. 第二條中所提到的參數都是可以配置的，用以改變tooltip效果

  下面再來看一個在表單中應用Tooltip的示例：

  注冊表單

  
  HTML代碼：

  <form id="myform"> 
      <h3>注冊表單</h3> 
      <!-- username --> 
      <label for="username">用戶名</label> 
      <input id="username" /> 
      <div class="tooltip">用戶名至少8個字母</div><br/> 
      <!-- password --> 
      <label for="password">密碼</label> 
      <input id="password" type="password" /> 
      <div class="tooltip">密碼強度不夠</div><br /> 
      <!-- email --> 
      <label for="username">郵箱</label> 
      <input id="email" /> 
      <div class="tooltip">請輸入合法格式Email</div><br /> 
  </form>

  Javascript代碼

  // 在id為myform元素中的所有input輸入框上應用tooltip效果
  $("#myform :input").tooltip({ 
   
      // 設置tooltip出現的位置
      position: ['center', 'right'], 
   
      // 進一步微調tooltip的位置
      offset: [-2, 10], 
   
      // 設置tooltip的顯示/消失效果
      effect: 'toggle', 
   
      // 設置tooltip透明度
      opacity: 0.7 
  });

  使用方法比較簡單，示例說明見代碼注釋。

• Expose（突出效果）

  Expose（我把它翻譯成突出效果，可能不準確），好像在網頁設計中比較少見，但用好了也是個相當人性化的設計。

  下面先用一個最簡單的例子看它是怎么回事：

  鼠標點擊這個區域看Expose效果，再點擊方框以外區域或Esc鍵取消Expose效果

  在我看來，Expose效果的應用是為了讓用戶專注于頁面的某個區域，瀏覽信息或完成某項工作，而不受其它干擾。例如，填寫某個重要表單，更例如觀看視頻（下面的例子介紹）。

  HTML代碼：

  <!--定義一個要用Expose效果的區域，并聲明ID-->
  <div id="test"> 
      鼠標點擊這個區域看Expose效果點擊方框以外區域或Esc鍵取消Expose效果
  </div>

  Javascript代碼

      // 在要添加效果元素的點擊事件中調用expose的load方法，綁定效果。
      $("#test").click(function() { 
          // 在點擊事件中綁定expose效果，{api: true}是允許訪問expose api，以在后面調用load()方法
          $(this).expose({api: true}).load(); 
      });

  使用方法很簡單，示例說明看代碼注釋。