jQueryUI工具提示插件
时间：2020-02-23 14:46:17 来源:igfitidea点击:
在本文中，我们将研究jQueryUI Tooltip插件的详细信息。
我们可以将工具提示附加到任何元素上，并且当鼠标指针悬停在该元素上时，标题属性将显示在该元素旁边的小框中。
这通常与表单元素一起使用，以为用户提供其他信息。
工具提示插件用于替换本地工具提示。
我们可以使用不同的选项，方法和事件来自定义工具提示，以改善用户体验。
工具提示插件选项
在本节中，我们将讨论可用于自定义jQueryUI Tooltip插件的不同选项。
我们在"操作中的工具提示插件"部分中使用了许多这些选项。
| Options | Syntax | Description |
|---|---|---|
| content | $( ".selector"; ).tooltip({ content: "Superb!"; }); | Set the content of the Tooltip |
| disabled | $( ".selector"; ).tooltip({ disabled: true }); | Tooltip will be disabled, if it is set to true. |
| hide | $( ".selector"; ).tooltip({ hide: { effect: "explode";, duration: 500 } }); | This option is used to animate the Tooltip on hide. |
| items | $( ".selector"; ).tooltip({ items: "img[alt]"; }); | This option is used to specify which items should display tooltip. |
| position | $( ".selector"; ).tooltip({ position: { my: "left+15 center";, at: "right center"; } }); | This option is used to identify the position of the tooltip in relation to the selected element.. |
| show | $( ".selector"; ).tooltip({ show: { effect: "blind";, duration: 800 } }); | This option is used to animate the tooltip on open. |
| tooltipClass | $( ".selector"; ).tooltip({ tooltipClass: "custom-tooltip-styling"; }); | This option is used to customize the tooltip by adding class to the tooltip widget. |
| track | $( ".selector"; ).tooltip({ track: true }); | This option is used to specify whether the tooltip should follow the mouse |
上表简要描述了jQueryUI Tooltip插件中的所有可用选项。
工具提示插件方法
在本节中，我们将研究jQueryUI Tooltip插件方法及其语法。
当您处理Tooltip插件时，这些方法非常有用。
| Methods | Usage | Description |
|---|---|---|
| close() | $( ".selector"; ).tooltip( "close"; ); | This method is used to close the tooltip. Called only for non-delegated tooltips. |
| destroy() | $( ".selector"; ).tooltip( "destroy"; ); | This method will remove the tooltip functionality completely. |
| disable() | $( ".selector"; ).tooltip( "disable"; ); | This method is used to disable the tooltip |
| enable() | $( ".selector"; ).tooltip( "enable"; ); | Used to enable the tooltip. |
| instance() | $( ".selector"; ).tooltip( "instance"; ); | Used to get the tooltip's instance object. |
| open() | $( ".selector"; ).tooltip( "open"; ); | This method is used to open the tooltip programmatically. Called only for non-delegated tooltips. |
| option( optionName, value ) | $( ".selector"; ).tooltip( "option";, "disabled";, true ); | Used to set the value of the tooltip associated with the optionName |
| widget() | $( ".selector"; ).tooltip( "widget"; ); | Used to get the jQuery Object containing the tooltip element. |
上表简要描述了jQueryUI Tooltip插件中的所有可用方法。
工具提示插件事件
在本节中，我们将讨论与jQueryUI Tooltip插件相关的不同事件。
我们在"操作中的工具提示插件"部分中使用了许多此类事件。
| Events | Usage | Description |
|---|---|---|
| close( event, ui ) | $( ".selector"; ).tooltip({,close: function( event, ui ) {}}); | This is fired when the tool tip is closed or when the focusout or mouseleave event is fired. |
| create( event, ui ) | $( ".selector"; ).tooltip({,create: function( event, ui ) {}}); | This is fired when the Tooltip is created. |
| open( event, ui ) | $( ".selector"; ).tooltip({,open: function( event, ui ) {}}); | This event is triggered when the mouse pointer is over the element, that is when it is displayed. |
上表简要描述了jQueryUI Tooltip插件中的所有可用事件。
工具提示插件
在本节中，我们将尝试不同的示例来探索jQueryUI Tooltip插件的用法。
默认功能
以下示例演示了jQueryUI Tooltip插件的默认功能。
<!doctype html>
<html>
<head>
<title>jQuery UI Tooltip– Default Functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><label for="name">Name:</label>
<input id="name" title="Enter your name">
<p><a href="#" title="theitroad by hyman Kumar">theitroad</a> tutorials for all your requirements.<p>
</body>
</html>
动画提示
以下示例演示了如何为工具提示插件设置动画。
我们使用"隐藏"和"显示"选项来对工具提示进行动画处理。
在本示例中，您还可以找到position选项和open事件的用法。
<!doctype html>
<html>
<head>
<title>jQuery UI Tooltip - Animation</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#name" ).tooltip({
show: {
effect: "slideDown",
delay: 200
}
});
$( "#link-tooltip" ).tooltip({
hide: {
effect: "explode",
delay: 200
}
});
$( "#city" ).tooltip({
show: null,
position: {
my: "left top",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
}
});
});
</script>
</head>
<body>
<p><label for="name">Name :</label>
<input id="name" title="Enter your name">
<p><label for="city">City :</label>
<input id="city" title="Enter your City">
<p><a id="link-tooltip" href="#" title="theitroad by hyman Kumar">theitroad</a> tutorials for all your requirements.<p>
</body>
</html>
使用track选项的工具提示
以下示例演示了track选项的用法。
当您在字段上移动时，将在鼠标后面看到工具提示。
<!doctype html>
<html>
<head>
<title>jQuery UI Tooltip – Track Mouse</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( document ).tooltip({
track: true
});
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><label for="name">Name:</label>
<input id="name" title="Enter your name">
<p><a href="#" title="theitroad by hyman Kumar">theitroad</a> tutorials for all your requirements.<p>
</body>
</html>
当您在字段上移动时，将在鼠标后面看到工具提示。
