详情参考:http://qtip2.com
我的 库文件以及自己总结的资料:链接:http://pan.baidu.com/s/1pJI43Cv密码:751y
基本用法: (1)只有简单提示 $('#username').qtip({ // Grab some elements to apply the tooltipto content: { text: '用户名只能输入英文字母或者数字' } }); \
(2)带标题的
$("#password').qtip({ // Grabsome elements to apply the tooltip to content: { text:'密码为6-12位数', title:"演示", }
\


(3)设置位置
$("#password').qtip({ // Grab some elements to apply the tooltipto content: { text: '密码为6-12位数', title:"演示", } , position:{ my: 'top left', at: 'bottom center', }, style:{ classes: 'qtip-purple', tip: { border:1, width:50, height:20 } } });
my:是指三角的位置 at:是在提示在组件的相对位置 (top 上 bottom下 )( left左 right右center中) 两组配合使用
(4)设置风格
$('#password').qtip({ // Grab someelements to apply the tooltip to content: { text: '密码为6-12位数', title:"演示", } , position:{ my: 'top left', at: 'bottom center', }, style:{ classes: 'qtip-purple', tip: { border:1, width:50, height:20 } } }); classes可以有多种选择
qtip-light浅色 qtip-dark 深色
qtip-cream
qtip-red
qtip-blue
qtip-shadow
qtip-rounded圆角
qtip-youtube
qtip-jtools
qtip-cluetip
qtip-tipsy
qtip-tip
qtip-titlebar
qtip-default
classes:'qtip-purple', \


classes: "qtip-purpleqtip-rounded',
\
可以自定义 上面的qtip-purple就是我自己定义的

.qtip-purple{background-colZ喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcjojOUZGMEUxO2JvcmRlci1jb2xvcjojRUVDOTMzO2NvbG9yOiM0MkI0NTN9LnF0aXAtcHVycGxlLnF0aXAtdGl0bGViYXJ7YmFja2dyb3VuZC1jb2xvcjojOTQ2NUUxfSA8d2JyPgo8YnI+CgpiYWNrZ3JvdW5kLWNvbG9yysfE2sjdtcSxs76w0dXJqwpib3JkZXItY29sb3I61fu49rXEsd+/8gpjb2xvcjrOxNfWtcTR1cmrCi5xdGlwLXB1cnBsZS5xdGlwLXRpdGxlYmFye2JhY2tncm91bmQtY29sb3I6ICM5NDY1RTF9ICA8d2JyPsno1sO1xMrHserM4rXEsbO+sMmrCjxpbWcgc3JjPQ=="http://www.2cto.com/uploadfile/Collfiles/20150210/20150210085228166.png" alt="\">

标题还可以设置标题文字颜色
.qtip-purple .qtip-titlebar{background-color:#9465E1;color:red} \

(6)显示 隐藏 重置等

显示:$('#username').qtip('show');

隐藏:$('#username').qtip('hide');


$('.selector').qtip('reposition');// Reposition all tooltips belonging to the selected elements重置该选择器选中元素的提示

$('.selector').qtip('disable');// Disable all tooltips belonging to the selectedelements

该选择器选中元素的提示组件设为不可用状态

$('.selector').qtip('toggle',true);// 显示该选择器选中元素的提示组件$('.selector').qtip('destroy',true);// 直接销毁属于该选择器选中元素的提示组件



(7)修改值


$(“#username”).qtip('api').set('content.text','这里是内容');

$(“#username”).qtip('api').set('content.text','这里是修改后的内容')..set('content.title','这里是修改后的标题');