jQuery UI 实例 - 工具提示框（Tooltip）
可自定义的、可主题化的工具提示框，替代原生的工具提示框。
如需了解更多有关 tooltip 部件的细节，请查看 API 文档 工具提示框部件（Tooltip Widget）。
默认功能
悬停在链接上，或者使用 tab 键循环切换聚焦在每个元素上。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( document ).tooltip(); }); </script> <style> label { display: inline-block; width: 5em; } </style></head><body> <p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p><p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="https://themeroller.com" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p><p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p><p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p><p>悬停在相应的区域上查看工具提示框。</p> </body></html>自定义样式
悬停在链接上，或者使用 tab 键循环切换聚焦在每个元素上。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 自定义样式</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( document ).tooltip({ position: { my: "center bottom-20", at: "center top", using: function( position, feedback ) { $( this ).css( position ); $( "<div>" ) .addClass( "arrow" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } } }); }); </script> <style> .ui-tooltip, .arrow:after { background: black; border: 2px solid white; } .ui-tooltip { padding: 10px 20px; color: white; border-radius: 20px; font: bold 14px "Helvetica Neue", Sans-Serif; text-transform: uppercase; box-shadow: 0 0 7px black; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .arrow.top { top: -16px; bottom: auto; } .arrow.left { left: 20%; } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px black; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranform: rotate(45deg); } .arrow.top:after { bottom: -20px; top: auto; } </style></head><body> <p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p><p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="https://themeroller.com" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p><p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p><p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p><p>悬停在相应的区域上查看工具提示框。</p> </body></html>自定义动画
本实例演示了如何使用 show 和 hide 选项来自定义动画，也可以使用 open 事件来自定义动画。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 自定义动画</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#show-option" ).tooltip({ show: { effect: "slideDown", delay: 250 } }); $( "#hide-option" ).tooltip({ hide: { effect: "explode", delay: 250 } }); $( "#open-event" ).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>这里有多种方式自定义工具提示框的动画。</p><p>您可以使用 <a id="show-option" href="https://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示">show</a> 和<a id="hide-option" href="https://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏">hide</a> 选项。</p><p>您也可以使用 <a id="open-event" href="https://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示">open</a> 事件。</p> </body></html>自定义内容
演示如何通过自定义 items 和 content 选项，来组合不同的事件委托工具提示框到一个单一的实例中。
您可能需要与地图工具提示框进行交互，这是未来版本中的一个待实现的功能。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 自定义内容</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> <style> .photo { width: 300px; text-align: center; } .photo .ui-widget-header { margin: 1em 0; } .map { width: 350px; height: 350px; } .ui-tooltip { max-width: 350px; } </style> <script> $(function() { $( document ).tooltip({ items: "img, [data-geo], [title]", content: function() { var element = $( this ); if ( element.is( "[data-geo]" ) ) { var text = element.text(); return "<img class='map' alt='" + text + "' src='https://maps.google.com/maps/api/staticmap?" + "zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" + text + "'>"; } if ( element.is( "[title]" ) ) { return element.attr( "title" ); } if ( element.is( "img" ) ) { return element.attr( "alt" ); } } }); }); </script></head><body> <div class="ui-widget photo"> <div class="ui-widget-header ui-corner-all"> <h2>圣史蒂芬大教堂（St. Stephen's Cathedral）</h2> <h3><a href="https://maps.google.com/maps?q=vienna,+austria&z=11" data-geo="">奥地利维也纳（Vienna, Austria）</a></h3> </div> <a href="https://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG"> <img src="/wp-content/uploads/2014/03/st-stephens.jpg" alt="圣史蒂芬大教堂（St. Stephen's Cathedral）" class="ui-corner-all"> </a></div> <div class="ui-widget photo"> <div class="ui-widget-header ui-corner-all"> <h2>塔桥（Tower Bridge）</h2> <h3><a href="https://maps.google.com/maps?q=london,+england&z=11" data-geo="">英国伦敦（London, England）</a></h3> </div> <a href="https://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg"> <img src="/wp-content/uploads/2014/03/tower-bridge.jpg" alt="塔桥（Tower Bridge）" class="ui-corner-all"> </a></div> <p>所有的图片源自 <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>，且归 <a href="https://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> 下版权持有人所有。</p> </body></html>表单
使用下面的按钮来显示帮助文本，或者只需要让鼠标悬停在输入框上或者让输入框获得焦点，即可显示相应输入框的帮助文本。
在 CSS 中定义一个固定的宽度，让同时显示所有的帮助文本时看起来更一致。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 表单</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> <style> label { display: inline-block; width: 5em; } fieldset div { margin-bottom: 2em; } fieldset .help { display: inline-block; } .ui-tooltip { width: 210px; } </style> <script> $(function() { var tooltips = $( "[title]" ).tooltip(); $( "<button>" ) .text( "Show help" ) .button() .click(function() { tooltips.tooltip( "open" ); }) .insertAfter( "form" ); }); </script></head><body> <form> <fieldset> <div> <label for="firstname">名字</label> <input id="firstname" name="firstname" title="请提供您的名字。"> </div> <div> <label for="lastname">姓氏</label> <input id="lastname" name="lastname" title="请提供您的姓氏。"> </div> <div> <label for="address">地址</label> <input id="address" name="address" title="您的家庭或工作地址。"> </div> </fieldset></form> </body></html>跟踪鼠标
本实例中的工具提示框是相对于鼠标进行定位的，当鼠标在元素上移动时，它会跟随鼠标移动。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 跟踪鼠标</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> <style> label { display: inline-block; width: 5em; } </style> <script> $(function() { $( document ).tooltip({ track: true }); }); </script></head><body><p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p><p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="https://themeroller.com" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p><p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p><p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p><p>悬停在相应的区域上查看工具提示框。</p> </body></html>视频播放器
一个虚拟的视频播放器，带有喜欢/分享/统计按钮，每个按钮都带有自定义样式的工具提示框。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 视频播放器</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> <style> .player { width: 500px; height: 300px; border: 2px groove gray; background: rgb(200, 200, 200); text-align: center; line-height: 300px; } .ui-tooltip { border: 1px solid white; background: rgba(20, 20, 20, 1); color: white; } .set { display: inline-block; } .notification { position: absolute; display: inline-block; font-size: 2em; padding: .5em; box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); } </style> <script> $(function() { function notify( input ) { var msg = "已选择 " + $.trim( input.data( "tooltip-title" ) || input.text() ); $( "<div>" ) .appendTo( document.body ) .text( msg ) .addClass( "notification ui-state-default ui-corner-bottom" ) .position({ my: "center top", at: "center top", of: window }) .show({ effect: "blind" }) .delay( 1000 ) .hide({ effect: "blind", duration: "slow" }, function() { $( this ).remove(); }); } $( "button" ).each(function() { var button = $( this ).button({ icons: { primary: $( this ).data( "icon" ) }, text: !!$( this ).attr( "title" ) }); button.click(function() { notify( button ); }); }); $( ".set" ).buttonset({ items: "button" }); $( document ).tooltip({ position: { my: "center top", at: "center bottom+5", }, show: { duration: "fast" }, hide: { effect: "hide" } }); }); </script></head><body> <div class="player">这里是视频 (HTML5?)</div><div class="tools"> <span class="set"> <button data-icon="ui-icon-circle-arrow-n" title="我喜欢这个视频">喜欢</button> <button data-icon="ui-icon-circle-arrow-s">我不喜欢这个视频</button> </span> <div class="set"> <button data-icon="ui-icon-circle-plus" title="添加到播放列表">添加到</button> <button class="menu" data-icon="ui-icon-triangle-1-s">添加到收藏夹</button> </div> <button title="分享这个视频">分享</button> <button data-icon="ui-icon-alert">标记为不恰当</button></div> </body></html>