Jquery Tools介绍—Tooltips

Tooltips（提示工具条）

Tooltips（提示工具条），就是当把鼠标放在网页某个元素上时，显示某个提示信息，用以解释或提示当前操作。它是改善用户体验的一种方式，也是网页设计中经常用到的。

下面首先看一个最简单的应用示例（将鼠标移动到下面文字上）：查看演示
 

 

HTML代码:

<!-- 提示工具条的触发元素 --> 
<div id="trigger"> 
    将鼠标移动到我的上面可以看到提示条
</div> 
 <!-- 定义提示工具条的内容 --> 
<div class="tooltip"> 
    <h3>The Tooltip</h3> 
    提示内容
</div>

Javascript代码：

$("#trigger").tooltip();   //为页面中id为trigger的区域添加tooltip效果

示例说明：

1. CSS样式完全由你控制，这里是上面提示条的css，供你参考
2. 上面是tooltip最简单的调用方法，没有配置任何参数。默认情况下：使用$(elements).tooltip();为页面所有elements元素绑定tooltip效果；tooltip显示的内容为elements后面紧跟的节点元素；提示条默认在触发元素的上方中央位置，以向上滑动的效果出现；
3. 第二条中所提到的参数都是可以配置的，用以改变tooltip效果

下面再来看一个在表单中应用Tooltip的示例：查看演示

 

HTML代码：

<form id="myform"> 
    <h3>注册表单</h3> 
    <!-- username --> 
    <label for="username">用户名</label> 
    <input id="username" /> 
    <div class="tooltip">用户名至少8个字母</div><br/> 
    <!-- password --> 
    <label for="password">密码</label> 
    <input id="password" type="password" /> 
    <div class="tooltip">密码强度不够</div><br /> 
    <!-- email --> 
    <label for="username">邮箱</label> 
    <input id="email" /> 
    <div class="tooltip">请输入合法格式Email</div><br /> 
</form>

Javascript代码

// 在id为myform元素中的所有input输入框上应用tooltip效果
$("#myform :input").tooltip({ 
 
    // 设置tooltip出现的位置
    position: ['center', 'right'], 
 
    // 进一步微调tooltip的位置
    offset: [-2, 10], 
 
    // 设置tooltip的显示/消失效果
    effect: 'toggle', 
 
    // 设置tooltip透明度
    opacity: 0.7 
});

使用方法比较简单，示例说明见代码注释。