jquery提示插件qtip2使用(全面)

详情参考：
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-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}  设置的是标题的背景色

标题还可以设置标题文字颜色


.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’,’这里是修改后的标题’);

原文链接：https://blog.csdn.net/w605283073/article/details/43672763

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。