clueTip 提示工具 jQuery 套件

clueTip 這是一個能夠方便您為一個連結或者任何的網頁元素增加一個 ToolTips (提示訊息)的功能，基於 jQuery 框架開發方便您為網頁增加更多不同的功能。在使用這一個套件連結包括 Title 屬性的時候，它的內容就可以直接變成了 clueTip 的標題文字。clueTip中顯示的內容更可以透過 ajax 的方式取得，也可以是當前頁面的元素項目。

使用方法：
第一步 載入  clueTip  的 JavaScript 檔案
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- jQuery hover 的套件程式 可以自行選擇是否再入-->
<script src="jquery.hoverIntent.js" type="text/javascript"></script>
<!-- clueTip 的主程式碼 -->
<script src="jquery.cluetip.js" type="text/javascript"></script>


第二步 寫入部分需要提示的 HTML 程式碼片段
<!--使用 AJAX 來取得 toolTips 的內容 -->
  <p><a class="tips" href="fragment.html" rel="fragment.html">show me the cluetip!</a></p>

  <!--使用 Title 屬性來當作 toolTips 的內容 -->
  <p><a id="houdini" href="houdini.html" title="|Houdini was an escape artist.|He was also adept at prestidigitation.">Houdini</a></p>


第三步 使用 JavaScript 來使 clueTip 初始化
$(document).ready(function() {
  $('a.tips').cluetip();
  $('#houdini').cluetip({
    splitTitle: '|',
    showTitle: false
  });
});

附上程式可修改的參數值

$.fn.cluetip.defaults = {  // 預設參數與可修改數值
    multiple:         false,    // 允許創建一個新的工具提示
    width:            275,      // 提示的寬度
    height:           'auto',   // 提示的高度
    cluezIndex:       97,       // z-index 的數值
    positionBy:       'auto',   // 設定定位的類型
    topOffset:        15,       // 與上方距離
    leftOffset:       15,       // 與左邊距離
    local:            false,    // 是否頁面上的資料
    hideLocal:        true,     // 是否隱藏本地端地設置資料
    localPrefix:      null,     // 要加到提示的訊息屬性
    localIdSuffix:    null,     // 訊息的ID
    attribute:        'rel',    // 主體內容的屬性
    titleAttribute:   'title',  // 標題內容的屬性
    splitTitle:       '',       // 分割的字符
    escapeTitle:      false,    // 是否已 HTML 轉譯
    showTitle:        true,     // 是否顯示標題列
    cluetipClass:     'default',// 增加 Class 類別
    hoverClass:       '',       // 滑鼠移過的類別
    waitImage:        true,     // 是否加載讀取中圖片
    cursor:           'help',   // 滑鼠的顯示
    arrows:           false,    // 是否顯示箭頭
    dropShadow:       true,     // 是否顯示陰影效果
    dropShadowSteps:  6,        // 陰影的大小
    sticky:           false,    // 是否保持可視
    mouseOutClose:    false,    // 關閉時的滑鼠樣式
    delayedClose:     50,       // 關閉的延遲時間單位為毫秒
    activation:       'hover',  // 觸發方式
    clickThrough:     true,     // 是否可點擊觸發事件
    tracking:         false,    // 是否跟隨滑鼠移動
    closePosition:    'top',    // 關閉的位置
    closeText:        'Close',  // 關閉的文字
    truncate:         0,        // 截斷的字元數
    fx: {
                      open:       'show',
                      openSpeed:  ''
    },
    // 使用 hoverIntent 套件
    hoverIntent: {
                      sensitivity:  3,
                      interval:     50,
                      timeout:      0
    },

    // 啟動時傳回
    onActivate:       function(event) {return true;},

    // 顯示時傳回
    onShow:           function(ct, ci){},

    // 隱藏時傳回
    onHide:           function(ct, ci){},

    // 是否快取
    ajaxCache:        true,

    // 過程數據過濾
    ajaxProcess:      function(data) {
                        data = data.replace(/<(script|style|title)[^<]+<\/(script|style|title)>/gm, '').replace(/<(link|meta)[^>]+>/g,'');
                        return data;
    },
    // 使用AJAX的回調函示
    ajaxSettings: {
      // AJAX 設定
      dataType: 'html'
    }
  };

作者網站：http://plugins.learningjquery.com/cluetip/
檔案大小：357 KB (包含範例)
檔案下載：https://github.com/kswedberg/jquery-cluetip
備份下載：下載