学习要点
- 调用tooltip()方法
- 修改tooltip()样式
- tooltip() 方法的属性
- tooltip()方法的事件
- tooltip()使用on
工具提示他彻底扩展了HTML中的title属性,让提示更加丰富,更加可以控制,全面提升用户体验。
调用tooltip() 方法
在调用tooltip()方法之前,首先要对元素设置相应的title属性
<input type="text" name="user" class="text" id="user" title="请输入账号,不小于2位!">
$("#user").tooltip();
修改tooltip()样式
//直接替换掉里面的类即可
.ul-tooltip{
color:red;
}
tooltip()方法的属性
对话框有两种形式.
1.tooltip(options) options是以对象键值对的形式传参,每个键值对表示一个选项
2.tooltip('action',param) action是操作对话框方法的字符串,param是options的某个选项
- disabled 设置为true将禁止显示工具提示.
- content 设置title内容
- items 设置显示器限定范围
- tooltipClass 引入class形式的css样式
$("[title]").tooltip({
disabled :false,
content:"改变文字",
items:"input",
tooltipClass:"reg_class"
})
position位置
$("#user").tooltip({
position:{
my: "left center",
at: 'right+5center'
}
})
my是以目标左下角为基准,at是以my为基准
动画显示的方法
$("#user").tooltip({
show:true,
hide:false
})
//默认就是淡入淡出