5.jQuery UI 工具提示UI_仍然不改的ui提示-CSDN博客

本文链接：https://blog.csdn.net/qq_16430735/article/details/38463785

工具提示（tooltip），是一个非常实用的UI。它彻底扩展了HTML 中的title

属性，让提示更加丰富，更加可控制，全面提升了用户体验。

一．调用tooltip()方法

在调用tooltip()方法之前，首先需要针对元素设置相应title 属性。

html :

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

jQuery :

$('#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 的某个选项。

tooltip 外观选项
属性	默认值/类型	说明
disabled	false/布尔值	设置为true，将禁止显示工具提示
content	无/字符串	设置title 内容
items	无/字符串	设置选择器以限定范围
tooltipClass	无/字符串	引入class 形式的CSS 样式

$('[title]').tooltip({

   disabled : false,

   content : '改变文字',

   items : 'input',

   tooltipClass : 'reg_tooltip'

});

tooltip 页面位置选项
属性	默认值/类型	说明
position	无/对象	使用对象的键值对赋值，有两个属性：my 和at 表示坐标。my 是以目标点左下角为基准，at 以 my 为基准

$('#user').tooltip({

   position : {

      my : 'left center',

      at : 'right+5 center'

   }

});

tooltip 视觉选项
属性	默认值/类型	说明
show	false/布尔值	显示对话框时，默认采用淡入效果
hide	false 布尔值	关闭对话框时，默认采用淡出效果

$('#user').tooltip({

   show : false,

   hide : false,

});

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

show 和hide 可选特效
特效名称	说明
blind	工具提示从顶部显示或消失
bounce	工具提示断断续续地显示或消失，垂直运动
clip	工具提示从中心垂直地显示或消失
slide	工具提示从左边显示或消失
drop	工具提示从左边显示或消失，有透明度变化
fold	工具提示从左上角显示或消失
highlight	工具提示显示或消失，伴随着透明度和背景色的变化
puff	工具提示从中心开始缩放。显示时“收缩”，消失时“生长”
scale	工具提示从中心开始缩放。显示时“生长”，消失时“收缩”
pulsate	工具提示以闪烁形式显示或消失

$('#user').tooltip({

   show : 'blind',

   hide : 'blind',

});

tooltip 行为选项
属性	默认值/类型	说明
track	false/布尔值	设置为true，能跟随鼠标移动

$('#user').tooltip({

   track : true,

});

四．tooltip()方法的事件

除了属性设置外，tooltip()方法也提供了大量的事件。这些事件可以给各种不同

状态时提供回调函数。这些回调函数中的this 值等于对话框内容的div 对象，不是整

个对话框的div。

tootip 事件选项
事件名	说明
create	当工具提示被创建时会调用create 方法，该方法有两个参数(event, ui)。此事件中的ui 参数为空
open	当工具提示被显示时，会调用open 方法，该方法有两个参数(event, ui)。此事件中的ui 有一个参数tooltip，返回是工具提示的jQuery 对象
close	当工具提示关闭时，会调用close 方法。关闭的工具提示可以用tooltip('open')重新打开。该方法有两个参数(event, ui)。此事件中的ui 有一个参数tooltip，返回是工具提示的jQuery 对象

//当创建工具提示时
$('#user').tooltip({

   create : function () {

      alert('创建触发！');

   }

});

//当工具提示关闭时
$('#user').tooltip({

   close : function () {

      alert('关闭触发');

   }

});

//当工具提示打开时
$('#user').tooltip({

   open : function () {

      alert('打开触发');

   }

});

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 属性的值

//打开工具提示
$('#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').tooltip('option', 'content', '提示内容');

五．tooltip()中使用on()

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

on()方法触发的对话框事件
特效名称	说明
tooltipopen	显示时触发
tooltipclose	每一次移动时触发

$('#reg').on('tooltipopen', function () {

   alert('打开时触发！');

});