$.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就介绍到这里，更多信息请参阅以下链接：
官方网站：
在线演示：
官方文档：
最后，放一个简单的DEMO。
作者：囧月
您可能感兴趣的文章: