详情参考:
http://qtip2.com
我下载的 库文件以及自己总结的资料:
链接:http://pan.baidu.com/s/1pJI43Cv密码:751y
基本用法:
(1)只有简单提示
$('#username').qtip({ // Grab some elements to apply the tooltipto
content: {
text: '用户名只能输入英文字母或者数字'
}
});
![](https://i-blog.csdnimg.cn/blog_migrate/72c4881f313f9f6aa6943f2befa347c0.png)
(2)带标题的
$('#password').qtip({ // Grabsome elements to apply the tooltip to
content: {
text:'密码为6-12位数',
title:"演示",
}
![](https://i-blog.csdnimg.cn/blog_migrate/6cc5152ff38630b9932ff4ce2637a7b0.png)
(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',
![](https://i-blog.csdnimg.cn/blog_migrate/3fb67a8ec1e9cc585012de00daf4be78.png)
classes: 'qtip-purpleqtip-rounded',
![](https://i-blog.csdnimg.cn/blog_migrate/96439b24529202e52119164cbd1f453e.png)
可以自定义 上面的qtip-purple就是我自己定义的
.qtip-purple{background-color:#9FF0E1;border-color:#EEC933;color:#42B453}.qtip-purple.qtip-titlebar{background-color:#9465E1}
background-color是内容的背景颜色
border-color:整个的边框
color:文字的颜色
.qtip-purple.qtip-titlebar{background-color: #9465E1} 设置的是标题的背景色
![](https://i-blog.csdnimg.cn/blog_migrate/a31a8001adaa212b86d064d12ff7c35a.png)
标题还可以设置标题文字颜色
.qtip-purple .qtip-titlebar{background-color:#9465E1;
color:red
}
![](https://i-blog.csdnimg.cn/blog_migrate/b8ee97e085a155e54af994f95f19b021.png)
(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','这里是修改后的标题');