工具提示ui



工具提示：

 

 

1. 出现提示，需要调用tooltip()方法

调用tooltip()方法之前，要设置对应元素的title属性

<input type="text"name="user" class="text" id="user" title="请输入账号，不少于2位！！">

Js中：$('#reg input[title]').tooltip();

1. 修改tooltip()样式

2. tooltip()方法属性

   对话框方法有两种形式：

1. tooltip(options),options以对象键值对的形式传参，每个键值对表示一个选项。

2. tooltip(‘action’,param),action是操作对话框方法的字符串，param是options的某个选项。

   tooltip外观选项

属性

默认值/类型

说明

disabled

false/布尔值

设置为true，将禁止显示工具提示

content

无/字符串

设置title内容

items

无/字符串

设置选择器以限定范围

tooltipClass

无/字符串

引入class形式的CSS样式

 

$('#user').tooltip({

disabled:true,//关闭提示内容

content:"change title",//提示内容为change title

items:'input'//筛选input

tooltipClass:'a'//引入一个css类a

});

tooltip页面位置

属性

默认值/类型

说明

Position

无/对象

使用对象的键值对赋值，有两个属性：my和at表示坐标，my是以目标点左下角为基准，at以my为基准

position:{

  my:'center top'

}

1. tooltip ()方法的事件

这些事件可以给各种不同状态时提供回调函数。这些回调函数中的this值等于对话框内容的div对象，而不是整个对话框的div。

tooltip事件选项

事件名

说明

create

当工具提示被创建时会调用create方法，该方法有两个参数（event，ui），，此事件中的ui参数为空

open

当工具提示被显示时，会调用open方法，该方法有两个参数（event，ui），此事件中的ui有一个参数tooltip，返回时工具提示的jQuery对象

close

当工具提示关闭时，会调用close方法。关闭的工具提示可以用tooltip（‘open’）重新打开。该方法有两个参数（event，ui），此事件中的ui有一个参数tooltip，返回时工具提示的jQuery对象。

open:function(e,ui){

    alert('open');

}