jQuery UI 實例 - 工具提示框（Tooltip） · W3School jQuery UI 教程

# jQuery UI 實例 - 工具提示框（Tooltip）可自定義的、可主題化的工具提示框，替代原生的工具提示框。如需了解更多有關 tooltip 部件的細節，請查看 API 文檔 [工具提示框部件（Tooltip Widget）](api-tooltip.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="http://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="http://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="http://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="http://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="http://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="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑動顯示">show</a> 和 <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隱藏">hide</a> 選項。</p> <p>您也可以使用 <a id="open-event" href="http://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="http://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='http://maps.google.com/maps/api/staticmap?" + "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" + 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="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo="">奧地利維也納（Vienna, Austria）</a></h3> </div> <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG"> <img src="img/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="http://maps.google.com/maps?q=london,+england&z=11" data-geo="">英國倫敦（London, England）</a></h3> </div> <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg"> <img src="img/tower-bridge.jpg" alt="塔橋（Tower Bridge）" class="ui-corner-all"> </a> </div> <p>所有的圖片源自 <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>，且歸 <a href="http://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="http://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="http://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="http://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="http://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> ```