工具提示（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("打开时触发！");

});

知问前端——工具提示UI的更多相关文章

  1. 第一百八十二节，jQuery-UI，知问前端--日历 UI

    jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...

  2. 第一百七十八节，jQuery-UI，知问前端--对话框 UI

    jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...

  3. 知问前端——日历UI(三)

    datepicker日期选择选项 属性 默认值/类型 说明 minDate 无/对象.字符串或数值 日历中可以选择的最小日期 maxDate 无/对象.字符串或数值 日历中可以选择的最大日期 defa ...

  4. 知问前端——日历UI(二)

    datapicker外观选项 属性 默认值/类型 说明 disabled false/布尔值 禁用日历 numberOfMonths 1/数值 日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...

  5. 知问前端——日历UI(一)

    日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...

  6. 知问前端——对话框UI(一)

    对话框(dialog),是jQuery UI非常重要的一个功能.它彻底的代替了JavaScript的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 开启多个dialog 我们 ...

  7. 知问前端——按钮UI

    按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单可以设置按钮或文本,还可以设置单选按钮和多选按钮. 使用button按钮 使用button按钮UI的时候,不一定必须是 ...

  8. 知问前端——对话框UI(二)

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

  9. 第一百七十九节，jQuery-UI，知问前端--按钮 UI-图标

    jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...

随机推荐

  1. jenkins手动安装插件

    插件下载地址: 搜索:https://plugins.jenkins.io/ 列表:https://updates.jenkins-ci.org/download/plugins/ 打开jenkins ...

  2. [C/C++] new/delete和malloc/free基本区别

    /**便于遗忘时复习**/ 区别一:本质 new/delete 在C++中是运算符不是函数,需要编译器支持.malloc/free是库函数,需要头文件支持,在C语言中使用. 区别二:开辟内存大小 用 ...

  3. Spark实战练习03--Pair RDD

    一.场景 现有某网站的网站日志,内容为用户对网站的请求,包含user ID.IP address.datetime……等等 另有一份文件中包含用户的账户详细信息数据,包含User ID.creatio ...

  4. HDU 4467 Graph（图论+暴力）（2012 Asia Chengdu Regional Contest）

    Description P. T. Tigris is a student currently studying graph theory. One day, when he was studying ...

  5. java基础知识-冒泡排序

    //冒泡排序,从数组前面向后循环比较 public static void sort1(int[] aa){ int size=aa.length; int temp; //循环数组 for(int ...

  6. hdu6097 Mindis(几何）

    题解: 这里是用解析解的做法, 我们发现如果以P和Q做椭圆,那么当椭圆与圆相切的时候,答案最优 那么方程就是这样的 联立之后,解delta等于0,可以得到 答案就是2a了 注意不一定任何情况都有解,当 ...

  7. 【题解】CQOI2015选数

    这题做的时候接连想错了好多次……但是回到正轨上之后依然是一个套路题.(不过这题好像有比莫比乌斯反演更好的做法,莫比乌斯反演貌似是某种能过的暴力ヽ(´ー｀)┌)不过能过也就行了吧哈哈. 首先我们把数字的 ...

  8. 【题解】HAOI2008硬币购物

    1A什么的实在是太开心啦~~洛谷P1450 这道题目主要是考察对于容斥原理的掌握. 首先,注意到如果不存在有关硬币数量的限制而单纯询问方案的总数,就是一个简单的完全背包.这个思路提醒我们:如果能够求出 ...

  9. [洛谷P2839][国家集训队]middle

    题目大意:给你一个长度为$n$的序列$s$.$Q$个询问,问在$s$中的左端点在$[a,b]$之间,右端点在$[c,d]$之间的子段中,最大的中位数. 强制在线. 题解:区间中位数?二分答案,如果询问 ...

  10. [洛谷P1879][USACO06NOV]玉米田Corn Fields

    题目大意:有一个$n\times m$的矩阵,$(1 \leq m \leq 12; 1 \leq n \leq 12)$,想在其中的一些格子中种草,一些格子不能种草,且两块草地不相邻.问有多少种种植 ...