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

一、實例

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

代碼：

<p>
  <a href="#" rel="external nofollow"  title="錨描述">錨文本</a>
  <input title="輸入幫助">
</p>
<script>
  $( document ).tooltip();
</script>

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

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

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

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

在一般情況下，禁用的元素不會觸發(fā)任何 DOM 事件。因此，適當(dāng)?shù)乜刂平迷氐墓ぞ咛崾究蚴遣豢赡艿?，因為我們需要監(jiān)聽事件來決定何時顯示和隱藏工具提示框。這就導(dǎo)致 jQuery UI 不能保證對附加到禁用元素上的工具提示框任何層次上的支持。這意味著如果您需要在禁用元素上進行提示，您可能需要使用一個原生的提示框和 jQuery UI 工具提示框的混合物。

二、主題化

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

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

三、快速導(dǎo)航

1、Options

• content：tooltip(工具提示框)的內(nèi)容。當(dāng)改變這個選項時，你可能還需要更改 items選項。
• disabled：如果設(shè)置為 true，則禁用該 tooltip（工具提示框）。
• hide：tooltip(工具提示框)關(guān)閉（隱藏）時的動畫效果。
• items：一個選擇器表示哪些項目應(yīng)該顯示tooltip(工具提示框)。 如果您使用其他的東西自定義，那么title屬性將作為tooltip(工具提示框)的內(nèi)容， 或者你需要一個不同的選擇來事件委托。
• position：確定 tooltip(工具提示框) 相對于 相關(guān)目標(biāo)元素的位置。 of選項默認(rèn)為目標(biāo)元素， 但您可以指定其他元素來定位。
• show：tooltip(工具提示框) 打開（顯示）時的動畫效果。
• tooltipClass：一個CSS樣式類名 添加到tooltip(工具提示框)小部件， 可用于顯示各種提示類型， 像警告或錯誤。
• track：tooltip(工具提示框)是否應(yīng)該跟蹤（跟隨）鼠標(biāo)。

2、Methods

• close()：關(guān)閉 tooltip(工具提示框) 。這僅供非委派的 tooltip(工具提示框) 調(diào)用。
• destroy()：完全移除 tooltip(工具提示框) 功能. 這將使元素返回到之前的初始化狀態(tài).
• disable()：禁用 tooltip(工具提示框)。
• enable()：啟用 tooltip(工具提示框)。
• open()：以編程方式打開一個 tooltip(工具提示框) 。這僅供非委派的 tooltip(工具提示框) 調(diào)用。
• option()：獲取當(dāng)前與指定的 optionName 關(guān)聯(lián)的值。
• widget()：返回一個包含 生成包裹元素 的 jQuery 對象。

3、Events

• close( event, ui )：當(dāng) tooltip(工具提示框) 關(guān)閉時觸發(fā)，觸發(fā)事件為focusout 或 mouseleave。
• create( event, ui )：在創(chuàng)建tooltip(工具提示框)時觸發(fā)該事件。
• open( event, ui )：當(dāng)tooltip(工具提示框)打開，顯示時，觸發(fā)此事件，觸發(fā)的事件為focusin 或 mouseover。

到此這篇關(guān)于jQuery UI工具提示框部件Tooltip Widget的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論