admin 管理员组

文章数量: 1087652

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

详情参考：
我下载的 库文件以及自己总结的资料： 链接：：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','这里是修改后的标题');

本文标签： jquery提示插件qtip2使用(全面)

版权声明：本文标题：jquery提示插件qtip2使用(全面) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700299421a386179.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。