知问前端——工具提示UI
工具提示（tooltip），是一个非常实用的UI。它彻底扩展了HTML中的title属性，让提示更加丰富，更加可控制，全面提升了用户体验。
调用tooltip()方法
在调用tooltip()方法之前，首先需要针对元素设置相应title属性。如：
<input type="text" name="user" class="text" id="user" title="请输入帐号， 不小于2位！ " />
$('#user').tooltip();
修改tooltip()样式
在弹出的tooltip提示框后，在火狐浏览器中打开Firebug或者右击->查看元素。这样，我们可以看看tooltip的样式，根据样式进行修改。
无须修改ui里的CSS，直接用style.css替代掉：
/* 工具提示的文本颜色 */ .ui-tooltip { color: #666; }
tooltip()方法的属性
对话框方法有两种形式：
1.tooltip(options)，options是以对象键值对的形式传参，每个键值对表示一个选项
2.tooltip('action', param)，action是操作对话框方法的字符串，param则是options的某个选项。
tooltip外观选项
| 属性 | 默认值/类型 | 说明 |
| disabled | false/布尔值 | 设置为true，将禁止显示工具提示 |
| content | 无/字符串 | 设置title内容 |
| items | 无/字符串 | 设置选择器以限定范围 |
| tooltipClass | 无/字符串 | 引入class形式的CSS样式 |
index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="index.js"></script> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> <div class="header_main"> <h1>知问</h1> <div class="header_search"> <input type="text" name="search" class="search" /> </div> <div class="header_button"> <button id="search_button">查询</button> </div> <div class="header_member"> <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a> </div> </div> </div> <div id="reg" title="会员注册"> <p> <label for="user">账号：</label> <input type="text" name="user" class="text" id="user" title="请输入账号，不少于2位！"></input> <span class="star">*</span> </p> <p> <label for="pass">密码：</label> <input type="password" name="pass" class="text" id="pass" title="请输入密码，不少于6位！"></input> <span class="star">*</span> </p> <p> <label for="email">邮箱：</label> <input type="text" name="email" class="text" id="email" title="请输入正确的邮箱！"></input> <span class="star">*</span> </p> <p> <label>性别：</label> <input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input> <input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input> </p> <p> <label for="date">生日：</label> <input type="text" name="date" readonly="readonly" class="text" id="date"></input> </p> </div> </body> </html>
jQuery代码：
$("[title]").tooltip({
disabled:true, //禁止显示工具提示
content:"改变title", //设置title内容
items:"input", //过滤，设置选择器以限定范围，我觉得应该相当于$("input[title]").tooltip();
tooltipClass:"a"
});
class=a的样式：
.a { color: red; }
tooltip页面位置选项
| 属性 | 默认值/类型 | 说明 |
| position | 无/对象 | 使用对象的键值对赋值，有两个属性：my和at表示坐标。my是以目标点左下角为基准，at以my为基准 |
详细说明my属性：
再来详细说明at属性：
还可以这样写：
$("[title]").tooltip({
position: {
my:"left center",
at:"right+10 center"
}
});
tooltip视觉选项
| 属性 | 默认值/类型 | 说明 |
| show | false/布尔值 | 显示对话框时，默认采用淡入效果 |
| hide | false/布尔值 | 关闭对话框时，默认采用淡出效果 |
jQuery代码：
$("[title]").tooltip({
show:false,
hide:false
});
注意：设置true后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字符串参数。
show和hide可选特效
| 特效名称 | 说明 |
| blind | 工具提示从顶部显示或消失 |
| bounce | 工具提示断断续续地显示或消失，垂直运动 |
| clip | 工具提示从中心垂直地显示或消失 |
| slide | 工具提示从左边显示或消失 |
| drop | 工具提示从左边显示或消失，有透明度变化 |
| fold | 工具提示从左上角显示或消失 |
| highlight | 工具提示显示或消失，伴随着透明度和背景色的变化 |
| puff | 工具提示从中心开始缩放。显示时“收缩” ，消失时“生长” |
| scale | 工具提示从中心开始缩放。显示时“生长” ，消失时“收缩” |
| pulsate | 工具提示以闪烁形式显示或消失 |
tooltip行为选项
| 属性 | 默认值/类型 | 说明 |
| track | false/布尔值 | 设置为true，能跟随鼠标移动 |
jQuery代码：
$("[title]").tooltip({
track:true//效果不好，一直在抖动
});
tooltip()方法的事件
除了属性设置外，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()：
$("[title]").tooltip({
open:function(e,ui) {
alert("打开时触发！"+ui.tooltip.length);
}
});
tooltip('action',param)方法
| 方法 | 返回值 | 说明 |
| tooltip('open') | jQuery对象 | 打开工具提示 |
| tooltip('close') | jQuery对象 | 关闭工具提示 |
| tooltip('disable') | jQuery对象 | 禁用工具提示 |
| tooltip('enable') | jQuery对象 | 启用工具提示 |
| tooltip('destroy') | jQuery对象 | 删除工具提示，直接阻断了tooltip |
| tooltip('widget') | jQuery对象 | 获取工具提示的jQuery对象 |
| tooltip('option',param) | 一般值 | 获取options属性的值 |
| tooltip('option',param,value) | jQuery对象 | 设置options属性的值 |
jQuery代码：
$("#pass").tooltip("open"); //一开始就打开工具提示
tooltip()中使用on()
在tooltip的事件中，提供了使用on()方法处理的事件方法。
on()方法触发的对话框事件
| 特效名称 | 说明 |
| tooltipopen | 显示时触发 |
| tooltipclose | 每一次移动时触发 |
jQuery代码：
$("#user").on("tooltipopen",function() {
alert("打开时触发！");
});
