Latest web development tutorials

jQuery UI API – 工具提示框部件（Tooltip Widget）

所屬類別

小部件（Widgets）

用法

描述：可自定義的、可主題化的工具提示框，替代原生的工具提示框。

版本新增： 1.9

工具提示框（Tooltip）取代了原生的工具提示框，讓它們可主題化，也允許進行各種自定義：

  • 顯示不僅僅是標題的其他內容，就如內聯的腳註或通過Ajax 檢索的額外內容。
  • 自定義定位，例如，在元素上居中工具提示框。
  • 添加額外的樣式來定制警告或錯誤區域的外觀。

默認使用一個漸變的動畫來顯示和隱藏工具提示框，這種外觀與簡單的切換可見度相比更具靈性。 這可以通過show和hide選項進行定制。

items和content選項需要保持同步。 如果您改變了其中一個，您需要同時改變另一個。

在一般情況下，禁用的元素不會觸發任何DOM 事件。 因此，適當地控制禁用元素的工具提示框是不可能的，因為我們需要監聽事件來決定何時顯示和隱藏工具提示框。 這就導致jQuery UI 不能保證對附加到禁用元素上的工具提示框任何層次上的支持。 這意味著如果您需要在禁用元素上進行提示，您可能需要使用一個原生的提示框和jQuery UI 工具提示框的混合物。

主題化

工具提示框部件（Tooltip Widget）使用jQuery UI CSS框架來定義它的外觀和感觀的樣式。 如果需要使用工具提示框指定的樣式，則可以使用下面的CSS class 名稱：

  • ui-tooltip ：工具提示框的外層容器。
    • ui-tooltip-content ：工具提示框的內容。

依賴

附加說明

  • 該部件要求一些功能性的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>