qTip2采用了MIT/GPLv2许可,官方网站为:http://craigsworks.com/projects/qtip2/,目前还没发布一个稳定版,Nightly版本经常会更新,当然这并不影响正常使用。
简介
若不放心可以尝试旧版的qTip,但在一些参数上会有所不同;若是从qTip升级到qTip2,可以使用官方提供的转换工具来升级你的代码:http://craigsworks.com/projects/qtip2/converter/。
如果使用时出现问题,那么直接下载以下3个文件吧,至少官方演示很正常:
从官方网站下载最新版本时,可以选择相应的样式及插件;可选的样式包括几种色彩风格(Colour Styles)、CSS3相关样式如圆角;以及以下各种插件,可根据自己需要选择:
Ajax,这个不用说,请求远程内容的
Tips,气泡对话效果,如箭头
Image map,提供对map内area标记的提示支持
SVG,对SVG元素提供提示的支持
BGIFrame,用于IE6这种古董,如遮住select控件等
除了以上插件的功能外,它的主要功能有(仅列出较常用的):
设置提示的内容、标题、关闭按钮等
提示信息显示/隐藏触发的事件,如鼠标移到元素上、点击(mouseenter,click)
text: "这是提示内容(by囧月 lwme.cnblogs.com)"
text: "这是提示内容(by囧月 lwme.cnblogs.com)"
$("a[title]").qtip(); //从链接的title
$("img[alt]").qtip(); //从img的alt
$("div[title]").qtip(); //从div的title
url: "lwmeAtCnblogs.aspx?name=囧月"
content: "这是提示内容(by囧月 lwme.cnblogs.com)",
event: 'click', // Show it on click...
solo: true, // ...and hide all other tooltips...
modal: true // ...and make it modal
content: "这是提示内容(by囧月 lwme.cnblogs.com)",
// 就可以通过ui-tooltip-myTooltip访问这个提示信息
// 如a[title],把原有的title重命名为oldtitle
// 如果只设置内容可以直接 content: "提示信息"
// 而不需要 content: { text: { "提示信息" } }
effect: function(api, pos, viewport) {
'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'
'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分别表示阴影、圆角效果,可以叠加,如下:
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
另外对于ajax则有以下主要参数可以设置(与jQuery.ajax一致):
text: 'Loading...', // Loading text...
url: '/path/to/file', // URL to the JSON script
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。
官方网站:http://craigsworks.com/projects/qtip2/
在线演示:http://craigsworks.com/projects/qtip2/demos/
官方文档:http://craigsworks.com/projects/qtip2/docs/