jQuery UI API - 工具提示框部件（Tooltip Widget） · W3School jQuery UI 教程

# jQuery UI API - 工具提示框部件（Tooltip Widget） ## 所屬類別 [小部件（Widgets）](ref-widgets.html) ## 用法 **描述：**可自定義的、可主題化的工具提示框，替代原生的工具提示框。 **版本新增：**1.9 工具提示框（Tooltip）取代了原生的工具提示框，讓它們可主題化，也允許進行各種自定義： * 顯示不僅僅是標題的其他內容，就如內聯的腳注或通過 Ajax 檢索的額外內容。 * 自定義定位，例如，在元素上居中工具提示框。 * 添加額外的樣式來定制警告或錯誤區域的外觀。默認使用一個漸變的動畫來顯示和隱藏工具提示框，這種外觀與簡單的切換可見度相比更具靈性。這可以通過 [`show`](#option-show) 和 [`hide`](#option-hide) 選項進行定制。 [`items`](#option-items) 和 [`content`](#option-content) 選項需要保持同步。如果您改變了其中一個，您需要同時改變另一個。在一般情況下，禁用的元素不會觸發任何 DOM 事件。因此，適當地控制禁用元素的工具提示框是不可能的，因為我們需要監聽事件來決定何時顯示和隱藏工具提示框。這就導致 jQuery UI 不能保證對附加到禁用元素上的工具提示框任何層次上的支持。這意味著如果您需要在禁用元素上進行提示，您可能需要使用一個原生的提示框和 jQuery UI 工具提示框的混合物。 ### 主題化工具提示框部件（Tooltip Widget）使用 [jQuery UI CSS 框架](api-css-framework.html) 來定義它的外觀和感觀的樣式。如果需要使用工具提示框指定的樣式，則可以使用下面的 CSS class 名稱： * `ui-tooltip`：工具提示框的外層容器。 * `ui-tooltip-content`：工具提示框的內容。 ### 依賴 * [UI 核心（UI Core）](ref-ui-core.html) * [部件庫（Widget Factory）](api-jQuery-widget.html) * [定位（Position）](api-position.html) * [特效核心（Effects Core）](ref-effects-core.html)（可選的；當與 [`show`](#option-show) 和 [`hide`](#option-hide) 選項一起使用時） ### 附加說明 * 該部件要求一些功能性的 CSS，否則將無法工作。如果您創建了一個自定義的主題，請使用小部件指定的 CSS 文件作為起點。 ## 實例使用帶有 title 屬性的所有元素的事件代理，在文檔上創建一個工具提示框（Tooltip）。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>工具提示框部件（Tooltip Widget）演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <p> <a href="#" title="錨描述">錨文本</a> <input title="輸入幫助"> </p> <script> $( document ).tooltip(); </script> </body> </html> ```