jQuery UI工具提示 jQueryUI工具提示|jQueryUI

本文概述

第一种方法
jQuery UI Tooltip()示例1
jQueryUI Tooltip()方法示例2
jQuery UI Tooltip()方法示例3
第二种方法
jQueryUI Tooltip()方法示例4

jQuery UI工具提示小部件取代了本机工具提示, 因为jQuery UI工具提示允许自定义并添加新主题。
什么是工具提示？
当你将鼠标悬停在元素上时, 工具提示会与元素一起使用, 以在元素旁边的标题框中显示标题。工具提示可以附加到任何元素。如果要显示工具提示, 只需将标题属性添加到输入元素, 标题属性值将用作工具提示。
jQueryUI Tooltip有什么作用？
jQuery UI tooltip()方法将工具提示添加到要在其上显示工具提示的任何元素。与仅切换可见性相比, 默认情况下, 它提供淡入淡出的动画来显示和隐藏工具提示。
句法：
你可以两种形式使用tooltip()方法。

$(selector, context).tooltip (options) Method

(selector, context).tooltip ("action", [params]) Method

第一种方法工具提示（选项）方法指定可以将工具提示添加到HTML元素。 options参数是一个对象, 用于指定工具提示的行为和外观。
句法：

$(selector, context).tooltip(options);

你可以使用Javascript对象一次使用一个或多个选项。如果有多个选项, 你将使用逗号将它们分开, 如下所示：

$(selector, context).tooltip({option1: value1, option2: value2..... });

以下是可与该方法一起使用的不同选项的列表。

选项	描述
content	此选项用于表示工具提示的内容。默认情况下, 其值为返回标题属性的函数。
disabled	如果将此选项设置为true, 它将禁用工具提示。默认情况下, 其值为false。
hide	隐藏工具提示时, 此选项用于表示动画效果。默认情况下, 其值为true。
items	此选项指定哪些项目可以显示工具提示。默认情况下, 其值为[title]。
position	此选项用于指示工具提示相对于关联目标元素的位置。默认情况下, 其值为返回标题属性的函数。其可能的值为：我的, 发生于, 发生于, 发生碰撞, 使用中, 发生于内部。
show	此选项表示如何对工具提示的显示进行动画处理。默认情况下, 其值为true。
tooltipClass	此选项是一个类, 可以为警告或错误之类的工具提示添加到工具提示小部件中。默认情况下, 其值为null。
track	如果将此选项设置为true, 则工具提示将跟随/跟踪鼠标。默认情况下, 其值为false。

jQuery UI Tooltip()示例1让我们以一个简单的示例来演示工具提示功能, 该工具提示功能不将任何参数传递给tooltip()方法。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Tooltip functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/022Z46263-0.jpg"> < /script> < script src="http://img.readke.com/220430/022Z444Y-1.jpg"> < /script> < !-- Javascript --> < script> $(function() { $("#tooltip-1").tooltip(); $("#tooltip-2").tooltip(); }); < /script> < /head> < body> < !-- HTML --> < label for="comment"> What is your comment:< /label> < input id="tooltip-1" title="We are asking your comment just for feedback"> < p> < a id="tooltip-2" href="http://www.srcmini.com/#" title="srcmini is the best tutorial website."> I also have a tooltip < /a> < /p> < /body> < /html>

立即测试
jQueryUI Tooltip()方法示例2使用职位：
让我们以一个示例来演示jQuery UI工具提示功能中选项位置的用法。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Tooltip functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/022Z46263-0.jpg"> < /script> < script src="http://img.readke.com/220430/022Z444Y-1.jpg"> < /script> < !-- CSS --> < style> body { margin-top: 100px; }.ui-tooltip-content::after, .ui-tooltip-content::before { content: ""; position: absolute; border-style: solid; display: block; left: 90px; } .ui-tooltip-content::before { bottom: -10px; border-color: #AAA transparent; border-width: 10px 10px 0; } .ui-tooltip-content::after { bottom: -7px; border-color: white transparent; border-width: 10px 10px 0; } < /style> < !-- Javascript --> < script> $(function() { $( "#tooltip-7" ).tooltip({ position: { my: "center bottom", at: "center top-10", collision: "none" } }); }); < /script> < /head> < body> < !-- HTML --> < label for="name"> Name:< /label> < input id="tooltip-7" title="Please use capital letters."> < /body> < /html>

立即测试
jQuery UI Tooltip()方法示例3内容的使用, 跟踪和禁用：
以下示例演示了选项内容, 跟踪和禁用选项的用法。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Tooltip functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/022Z46263-0.jpg"> < /script> < script src="http://img.readke.com/220430/022Z444Y-1.jpg"> < /script> < !-- Javascript --> < script> $(function() { $( "#tooltip-3" ).tooltip({ content: "< strong> Hello srcmini< /strong> ", track:true }), $( "#tooltip-4" ).tooltip({ disabled: true }); }); < /script> < /head> < body> < !-- HTML --> < label for="name"> Here is the message:< /label> < input id="tooltip-3" title="tooltip"> < br> < br> < br> < label for="name"> Tooltip is disabled:< /label> < input id="tooltip-4" title="tooltip"> < /body> < /html>

立即测试
第二种方法工具提示（操作, 参数）方法用于对工具提示元素执行操作, 例如禁用工具提示。该操作在第一个参数中指定为字符串, 并且可以选择根据给定操作使用一个或多个参数。
句法：

$(selector, context).tooltip ("action", [params]);

以下是此方法使用的不同操作的列表。

行动	描述
close()	此操作用于关闭工具提示。此方法不接受任何参数。
destroy()	此操作用于完全删除工具提示功能。这将使元素返回其初始状态。此方法不接受任何参数。
disable()	此操作用于停用工具提示。此方法不接受任何参数。
enable()	此操作将激活工具提示。此方法不接受任何参数。
open()	此操作以编程方式打开工具提示。此方法不接受任何参数。
option(optionName)	此操作获取与工具提示的optionName关联的值。此方法不接受任何参数。
option()	此操作将获取一个对象, 该对象包含表示当前工具提示选项哈希的键/值对。此方法不接受任何参数。
option(optionName, Value)	此操作设置与指定的optionName关联的工具提示选项的值。
option(Options)	此操作为工具提示设置一个或多个选项。
widget()	该操作返回一个包含原始元素的jQuery对象。此方法不接受任何参数。

【jQuery UI工具提示】与工具提示元素一起使用的事件方法：
jQueryUI触发特定事件的事件方法。以下是这些事件方法的列表：

事件方法	描述
create(event, ui)	创建工具提示时将触发它。这里事件是事件类型, 而用户界面是对象类型。
close(event, ui)	当工具提示关闭时触发。通常是在对焦或鼠标离开时触发。这里事件是事件类型, 而用户界面是对象类型。
open(event, ui)	显示或显示工具提示时触发。通常在focusin或鼠标悬停时触发。这里事件是事件类型, 而用户界面是对象类型。

jQueryUI Tooltip()方法示例4让我们以一个示例来演示工具提示功能期间事件方法的用法。下面的示例使用open和close事件。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Tooltip functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/022Z46263-0.jpg"> < /script> < script src="http://img.readke.com/220430/022Z444Y-1.jpg"> < /script> < !-- Javascript --> < script> $(function() { $('.tooltip-9').tooltip({ items: 'a.tooltip-9', content: 'Are you looking for a training program?', show: "slideDown", // show immediately open: function(event, ui) { ui.tooltip.hover( function () { $(this).fadeTo("slow", 0.5); }); } }); }); $(function() { $('.tooltip-10').tooltip({ items: 'a.tooltip-10', content: 'Welcome to srcmini', show: "fold", close: function(event, ui) { ui.tooltip.hover(function() { $(this).stop(true).fadeTo(500, 1); }, function() { $(this).fadeOut('500', function() { $(this).remove(); }); }); } }); }); < /script> < /head> < body style="padding:100px; "> < !-- HTML --> < div id="target"> < a href="http://www.srcmini.com/#" class="tooltip-9"> Hover over me!< /a> < br/> < a href="http://www.srcmini.com/#" class="tooltip-10"> Hover over me too!< /a> < /div> < /body> < /html>

立即测试