jquery 工具提示

学习要点

  • 调用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
   })
//默认就是淡入淡出
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容