qTip2采用了MIT/GPLv2許可，官方網站為：http://craigsworks.com/projects/qtip2/，目前還沒發布一個穩定版，Nightly版本經常會更新，當然這並不影響正常使用。
簡介
若不放心可以嘗試舊版的qTip，但在一些參數上會有所不同；若是從qTip升級到qTip2，可以使用官方提供的轉換工具來升級你的代碼：http://craigsworks.com/projects/qtip2/converter/。
如果使用時出現問題，那麼直接下載以下3個文件吧，至少官方演示很正常：
. 代碼如下:
<link href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
從官方網站下載最新版本時，可以選擇相應的樣式及插件；可選的樣式包括幾種色彩風格(Colour Styles)、CSS3相關樣式如圓角；以及以下各種插件，可根據自己需要選擇：
除了以上插件的功能外，它的主要功能有（僅列出較常用的）：
使用方法
以下就簡單演示一些使用方法
創建一個最簡單的提示：
. 代碼如下:
$("#demo2").qtip({
content: "這是提示內容（by囧月）"
});
創建一個帶標題的提示：
. 代碼如下:
$("#demo3").qtip({
content: {
text: "這是提示內容（by囧月 lwme.cnblogs.com）"
, title: "提示標題"
}
});
帶關閉按鈕的提示：
. 代碼如下:
$("#demo3").qtip({
content: {
text: "這是提示內容（by囧月 lwme.cnblogs.com）"
, title: {
text: "提示標題"
, button: "關閉"
}
}
});
使用元素的屬性作為提示信息：
. 代碼如下:
$("a[title]").qtip(); //從鏈接的title
$("img[alt]").qtip(); //從img的alt
$("div[title]").qtip(); //從div的title
也可以顯式指定元素屬性作為提示信息：
. 代碼如下:
$('img[alt]').qtip({
content: {
attr: 'alt'
}
});
使用AJAX請求遠程：
. 代碼如下:
$("#demo4").qtip({
content: {
text: "加載中...",
ajax: {
url: "lwmeAtCnblogs.aspx?name=囧月"
}
}
});
設置位置及樣式：
. 代碼如下:
$("#demo5").qtip({
position: {
my: 'bottom left',
at: 'top center'
},
style: {
classes: 'ui-tooltip-red'
}
});
點擊時出現模態對話框：
. 代碼如下:
$('button').qtip({
content: "這是提示內容（by囧月 lwme.cnblogs.com）",
show: {
event: 'click', // Show it on click...
solo: true, // ...and hide all other tooltips...
modal: true // ...and make it modal
},
hide: false
});
頁面加載完成時顯示，且不會自動隱藏：
. 代碼如下:
$('button').qtip({
content: "這是提示內容（by囧月 lwme.cnblogs.com）",
show: {
ready: true
},
hide: false
});
參數設置
先看一下qTip2默認的參數設置：
. 代碼如下:
$.fn.qtip.defaults = {
// 頁面加載完成就創建提示信息的元素
prerender: false,
// 為提示信息設置id，如設置為myTooltip
// 就可以通過ui-tooltip-myTooltip訪問這個提示信息
id: false,
// 每次顯示提示都刪除上一次的提示
overwrite: true,
// 通過元素屬性創建提示
// 如a[title]，把原有的title重命名為oldtitle
suppress: true,
// 內容相關的設置
content: {
// 提示信息的內容
// 如果只設置內容可以直接 content: "提示信息"
// 而不需要 content: { text: { "提示信息" } }
text: true,
// 提示信息使用的元素屬性
attr: 'title',
// ajax插件
ajax: false,
title: {
// 提示信息的標題
// 如果只設置標題可以直接 title: "標題"
text: false,
// 提示信息的關閉按鈕
// 如button:"x",button:"關閉"
// 都可以啟用關閉按鈕
button: false
}
},
// 位置相關的設置
position: {
// 提示信息的位置
// 如提示的目標元素的右下角(at屬性)
// 對應 提示信息的左上角(my屬性)
my: 'top left',
at: 'bottom right',
// 提示的目標元素，默認為選擇器
target: FALSE,
// 提示信息默認添加到的容器
container: FALSE,
// 使提示信息在指定目標內可見，不會超出邊界
viewport: FALSE,
adjust: {
// 提示信息位置偏移
x: 0, y: 0,
mouse: TRUE,
resize: TRUE,
method: 'flip flip'
},
// 特效
effect: function(api, pos, viewport) {
$(this).animate(pos, {
duration: 200,
queue: FALSE
});
}
},
// 顯示提示的相關設置
show: {
// 觸發事件的目標元素
// 默認為選擇器
target: false,
// 事件名稱，默認為鼠標移到時
// 可以改為click點擊
event: 'mouseenter',
// 特效
effect: true,
// 延遲顯示時間
delay: 90,
// 隱藏其他提示
solo: false,
// 在頁面加載完就顯示提示
ready: false,
modal: {
// 啟用模態對話框效果
on: false,
// 特效
effect: true,
blur: true,
escape: true
}
},
// 隱藏提示的相關設置
// 參考show
hide: {
target: false,
event: 'mouseleave',
effect: true,
delay: 0,
// 設置為true時，不會隱藏
fixed: false,
inactive: false,
leave: 'window',
distance: false
},
// 樣式相關
style: {
// 樣式名稱
classes: '',
widget: false,
width: false,
height: false,
// tip插件，箭頭相關設置
tip: {
corner: true,
mimic: false,
width: 8,
height: 8,
border: true,
offset: 0
}
},
// 相關事件綁定
events: {
render: null,
move: null,
show: null,
hide: null,
toggle: null,
visible: null,
focus: null,
blur: null
}
};
看起來是很多，但是使用頻率最高的估計也就以下這些參數：
. 代碼如下:
$.fn.qtip.defaults = {
content: {
text: true,
attr: 'title',
ajax: false,
title: {
text: false,
button: false
}
},
position: {
my: 'top left',
at: 'bottom right',
},
show: {
event: 'mouseenter',
solo: false,
ready: false,
modal: false
},
hide: {
event: 'mouseleave'
},
style: 'ui-tooltip-default'
};
對於顯示的位置，有以下參數可以設置：
. 代碼如下:
my = [
'top left', 'top right', 'top center',
'bottom left', 'bottom right', 'bottom center',
'right center', 'right top', 'right bottom',
'left center', 'left top', 'left bottom', 'center'
]
at = [
'bottom left', 'bottom right', 'bottom center',
'top left', 'top right', 'top center',
'left center', 'left top', 'left bottom',
'right center', 'right top', 'right bottom', 'center'
]
而對於顯示的色彩風格則有以下各種顏色：
. 代碼如下:
['red', 'blue', 'dark', 'light', 'green','jtools', 'plain', 'youtube', 'cluetip', 'tipsy', 'tipped']
比如red就是ui-tooltip-red，默認為default。另外還有ui-tooltip-shadow、ui-tooltip-rounded分別表示陰影、圓角效果，可以疊加，如下：
. 代碼如下:
$("#demo2").qtip({
content: "這是提示內容（by囧月）"
, style: {
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});
另外對於ajax則有以下主要參數可以設置（與jQuery.ajax一致）：
. 代碼如下:
$('.selector').qtip({
content: {
text: 'Loading...', // Loading text...
ajax: {
url: '/path/to/file', // URL to the JSON script
type: 'GET', // POST or GET
data: { id: 3 }, // Data to pass along with your request
dataType: 'json', // Tell it we're retrieving JSON
success: function(data, status) {
//...
}
}
}
});
需要注意的是，AJAX默認使用GET請求而且啟用了cache。
結尾
關於qTip2就介紹到這裡，更多信息請參閱以下鏈接：
官方網站：http://craigsworks.com/projects/qtip2/
在線演示：http://craigsworks.com/projects/qtip2/demos/
官方文檔：http://craigsworks.com/projects/qtip2/docs/
最後，放一個簡單的DEMO。
作者：囧月