jquery tools之tooltip

如tabs的学习，首先给出操作的html目标代码：


代码如下:

<form id="myform">
<h3> Registration Form</h3>
<!-- username -->
<label for="username">Username</label>
<input id="username" />
<div class="tooltip">Must be at least 8 characters.</div><br/>
<!-- password -->
<label for="password">Password</label>
<input id="password" type="password" />
<div class="tooltip">Try to make it hard to guess.</div><br />
<!-- email -->
<label for="username">Email</label>
<input id="email" />
<div class="tooltip">We won't send you any marketing material.</div><br />
<!-- message -->
<label for="body">Message</label>
<textarea id="body"></textarea>
<div class="tooltip">What's on your mind?</div><br />
</form>

该功能是通过jqueryObject.tooltip()方法来实现的，其中tabs方法提供以下两种方式：
1. $("#myform :input").tooltip()//该方法能采用默认方法显示提示信息栏
2. $("#myform :input").tooltip({config object}) //该方法通过配置对象将来灵活组织提示信息栏的显示。
以下代码为第二种方式的配置参数实现（只需将该实现放于jquery的ready方法中即可）：


代码如下:

$("#myform :input").tooltip({
position:['center','right'],
offset:[-2,10],
effect:'fade',
fadeInSpeed:300//此属性只有在effect为fade时有效
delay:0,
opacity:1,
tip:"",
api:false,
onBeforeShow:function(){
//alert(this.getTip().html());//this在该回调函数代表即将显示的tooltip对象
//，关于该api对象的操作参见获取tolltip对象的方法
},
onShow:function(){
//alert(this.getTip().html());
},
onBeforeHide:function(){
//alert(this.getTip().html());
},
onHide:function(){
//alert(this.getTip().html());
}
});

下面就以上配置参数说明描述如下：

提示框位置说明

提示框位置通过config配置对象的position和offset属性来设置实现。这两个属性都是用js数组进行值存放的。

Position属性用来设置提示信息相对于它的触发元素位置。比如说，如果该属性值为[‘bottom','center']，那么提示信息将会出现在其触发元素的正下方（垂直位置为下方，水平位置为中间）。下图能很好的描述触发元素与提示信息的位置关系：

de life" alt="jquery tools之tooltip - gaoyusi - My code life" src="http://zsrimg.ikafan.com/upload/20090725145728765.jpg">

offset属性用来进一步精确的调整提示框的位置。比如：[10,-20]表示提示信息向下10px并向左偏移20px。数组的前一个值用于描述提示框距其上边框向下偏移的值；数组的后一个值 用于描述提示框距其左边框向右偏移的值。

系统内置effect描述

系统内置的三种effect及其参数设置说明：

toggle:一种简单的显示/隐藏效果，这里tooltip没有提供与之对应的配置参数

fade:一种逐渐显示/逐渐隐藏的效果，这里tooltip提供了两个与其对应的配置参数：

fadeInSpeed——默认值为200ms，用于设置提示信息逐渐显示的速度。

fadeUotSpeed——默认值为200ms，用于设置提示信息逐渐隐藏的速度。

slideup:一种逐渐向上/下滑动的效果，这里tooltip提供了三个与其对应的配置参数：

slideOffset——默认值为10，用于描述提示信息在垂直方向上滑动到距触发元素的距离，如果为正值，那么就是向上滑动，否则为向下滑动。

slideInSpeed——默认值为200ms。用于设置提示信息滑动显示的速度（时间）

slideOutSpeed——默认值为200ms。用于设置提示信息滑动消失的速度（时间）

此外，tooltip还提供了一系列获取tooltip对象的方法，具体实现描述如下：


代码如下:

var tooltip=$("#myform input").tooltip(2);//取第3个tooltip对象
tooltip.show();
tooltip.hide();
//alert(tooltip.isShown());
//alert(tooltip.getTip().html());
//alert(tooltip.getTrigger().next().html());
//alert(tooltip.getConf().effect);
tooltip.onBeforeShow=function()
//alert(this.getTip().html());
}

tooltip.onShow=function(){
alert(this.getTip().html());
}

tooltip.onBeforeHide=function(){
alert(this.getTip().html());
}

tooltip.onHide=function(){
alert(this.getTip().html());
}

下面就以上获取tooltip对象的方法说明描述如下：

最后，以jquery tools上几个demo的截图为结尾：

de life" alt="jquery tools之tooltip - gaoyusi - My code life" src="http://zsrimg.ikafan.com/upload/20090725145728864.jpg">

de life" alt="jquery tools之tooltip - gaoyusi - My code life" src="http://zsrimg.ikafan.com/upload/20090725145728607.jpg">

de life" alt="jquery tools之tooltip - gaoyusi - My code life" src="http://zsrimg.ikafan.com/upload/20090725145728738.jpg">