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

所屬類(lèi)別

小部件（Widgets）

用法

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

版本新增：1.9

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

  • 顯示不僅僅是標(biāo)題的其他內(nèi)容，就如內(nèi)聯(lián)的腳注或通過(guò) Ajax 檢索的額外內(nèi)容。
  • 自定義定位，例如，在元素上居中工具提示框。
  • 添加額外的樣式來(lái)定制警告或錯(cuò)誤區(qū)域的外觀。

默認(rèn)使用一個(gè)漸變的動(dòng)畫(huà)來(lái)顯示和隱藏工具提示框，這種外觀與簡(jiǎn)單的切換可見(jiàn)度相比更具靈性。這可以通過(guò) show 和 hide 選項(xiàng)進(jìn)行定制。

items 和 content 選項(xiàng)需要保持同步。如果您改變了其中一個(gè)，您需要同時(shí)改變另一個(gè)。

在一般情況下，禁用的元素不會(huì)觸發(fā)任何 DOM 事件。因此，適當(dāng)?shù)乜刂平迷氐墓ぞ咛崾究蚴遣豢赡艿模驗(yàn)槲覀冃枰O(jiān)聽(tīng)事件來(lái)決定何時(shí)顯示和隱藏工具提示框。這就導(dǎo)致 jQuery UI 不能保證對(duì)附加到禁用元素上的工具提示框任何層次上的支持。這意味著如果您需要在禁用元素上進(jìn)行提示，您可能需要使用一個(gè)原生的提示框和 jQuery UI 工具提示框的混合物。

主題化

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

  • ui-tooltip：工具提示框的外層容器。
    • ui-tooltip-content：工具提示框的內(nèi)容。

依賴(lài)

附加說(shuō)明

  • 該部件要求一些功能性的 CSS，否則將無(wú)法工作。如果您創(chuàng)建了一個(gè)自定義的主題，請(qǐng)使用小部件指定的 CSS 文件作為起點(diǎn)。

實(shí)例

使用帶有 title 屬性的所有元素的事件代理，在文檔上創(chuàng)建一個(gè)工具提示框（Tooltip）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>工具提示框部件（Tooltip Widget）演示</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script>
</head>
<body>
 
<p>
  <a href="#" title="錨描述">錨文本</a>
  <input title="輸入幫助">
</p>
<script>
  $( document ).tooltip();
</script>
 
</body>
</html>

查看演示