第16章 知问前端--工具提示UI

学习要点：
1.调用 tooltip()方法
2.修改 tooltip()样式
3.tooltip()方法的属性
4.tooltip()方法的事件
5.tooltip()中使用 on()

工具提示（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:red;
}

 
注意：其他修改方案类似。

三．tooltip()方法的属性
对话框方法有两种形式：1.tooltip(options)，options 是以对象键值对的形式传参，每个键值对表示一个选项；2.tooltip('action', param)，action 是操作对话框方法的字符串，param则是 options 的某个选项。

 

$('[title]').tooltip({
disabled : false,
content : '改变文字',
items : 'input',
tooltipClass : 'reg_tooltip'
});

 

 

$('#user').tooltip({
position : {
my : 'left center',
at : 'right+5 center'
}
});

 

 

$('#user').tooltip({
show : false,
hide : false,
});

 


 
注意：设置 true 后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字符串参数。

$('#user').tooltip({
show : 'blind',
hide : 'blind',
});

 

 

$('#user').tooltip({
track : true,
});

 
四．tooltip()方法的事件
除了属性设置外，tooltip()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数。 这些回调函数中的 this 值等于对话框内容的div 对象， 不是整个对话框的 div。


 

//当创建工具提示时
$('#user').tooltip({
create : function () {
alert('创建触发！');
}
});

 

//当工具提示关闭时
$('#user').tooltip({
close : function () {
alert('关闭触发');
}
});

 

//当工具提示打开时
$('#user').tooltip({
open : function () {
alert('打开触发');
}
});

 

 

//打开工具提示
$('#user').tooltip('open');

 

//关闭工具提示
$('#user').tooltip('close');

 

//禁用工具提示
$('#user').tooltip('disable');

 

//启用工具提示
$('#user').tooltip('enable');

 

//删除工具提示
$('#user').tooltip('destroy');

 

//获取工具提示 jQuery 对象
$('#user').tooltip('widget');

 

//获取某个 options 的 param 选项的值
var title = $('#user').tooltip('option', 'content');
alert(title);

 

//设置某个 options 的 param 选项的值
$('#reg').dialog('option', 'content', '提示内容');

 

五．tooltip()中使用 on()
在 tooltip 的事件中，提供了使用 on()方法处理的事件方法。


 

$('#reg').on('tooltipopen', function () {
alert('打开时触发！');
});