為開發者準備的15 款Tooltip工具提示jQuery外掛

　　tooltip或者infotip或者hint，是一種常見的圖形使用者介面元素。它用於連同一個游標，通常是一個滑鼠游標。當使用者將滑鼠懸停在一個特定的地方，無需點選，就會出現一個包含關於懸停到這個地方的一些資訊的tooltip或小的懸浮框。

　　jQuery tooltip是應該考慮在網頁設計和開發中利用的最好的構件之一。Tooltip提供了額外的功能和通用型，可以被視為大多數網站的最重要的一個使用者介面元件。

　　本文中我收集了15個最好的jquery tooltip外掛，這些可以幫助你建立創新的和有創造性的網頁設計，同時也可以幫助你來實現你的web專案所需要的結果。我希望這個jquery tooltip外掛的列表對你即將到來或已經開始的web專案提供了便利並且是確實有用的。如果你知道一些其他的jquery tooltip外掛請通過在評論區跟帖讓我知道，非常期待。請享受本文！

　1. Tooltipster

　　Tooltipster是一個jQuery外掛，用來快速建立HTML5驗證的靈活的提示工具。這個外掛很小（4.8kb大小），工作很快並且可以很容易的被定製。外觀可以隨意改變CSS（支援主題）和滑鼠箭頭的位置，展現的延遲/時間都可以被定義。

　　Source

　2. Toolbar.js

　　Toolbar.js允許你快速建立用於web應用程式和網站的提供工具型別的工具欄。這個工具欄可以很容易的用twitter啟動圖示定製，還提供自適應的環繞在工具欄周圍顯示一些圖示。

Source

　3.qTip2

　　qTip2是第二代先進的qTip外掛，這是一個曾經很流行的jQuery框架。在1.0版本的友好的使用者和豐富的功能的基礎上，qTip2提供了一些增強的功能，比如氣泡提示、影像對映等等。它是完全免費的，許可是MIT/GPLv2。

　　Source

　4. Poshy Tip jQuery Plugin

　　Poshy Tip jQuery Plugin是一個提示框外掛，允許輕鬆建立時尚的提示框。通過Poshy Tip你可以把提示相對於滑鼠游標或目標元素來定位，並可以將它們橫向或縱向展示。

　　Source

　5. Grumble.js

　　Grumble.js提供了一個沒有東西南北定位限制的特殊的提示框。它可以從360度的任何角度環繞一個給定的元素，可以指定任意的距離。

　　Source

　6. Joyride

　　Joyride是一個jQuery的外掛，簡化了指導使用者發現一個網站的特點的過程。通過定義一個有序的步驟，可以在任何HTML元素附近通過提示框顯示需要的資訊。

　　Source

　7. ImageMapster

　　ImageMapster是一個可以通過新增更多地功能給舊圖片來讓它們更有生氣的jQuery外掛。使用這個外掛，可以通過各種方式突出顯示、選擇（單個或多個區域）和操縱任何的影象。提示工具可以顯示使用者友好的可以與該影象互動的資訊。

　　Source

　8. Tooltipsy

　　Tooltipsy是一個提供了建立提示工具的靈活基礎的jQuery外掛。它有最小的預設樣式或動畫，你都可以完全控制它們。它可以按你希望的方式來定位，外觀和感覺均可以通過CSS來定製，任何型別的動畫都可以被實現。

　　Source

　9. jQuery Bubble Popup

　　jQuery Bubble Popup是一個用來幫助建立容易控制的別緻Tooltip的最流行的JS框架的外掛。Tooltip通過淡入淡出的方式顯示/隱藏，裡面也可以顯示任何的HTML內容。它們可以附加到任何一邊的一個元素中，也可以獲取Tooltip的狀態（開/關，建立，最後一次修改或最後一次顯示的時期時間）而採取相應的動作。

　　Source

　10. Beauty Tips

　　BeautyTips是一個使用canvas元素來實時繪製Tooltip的jQuery外掛。每一個Tooltip預設顯示在一個元素的有足夠空間的一邊，但是這個位置也可以強制放到一邊。內容可以硬編碼進去，或者從一個屬性獲取或者通過一次Ajax請求獲取。

　　Source

　11. Simpletip

　　Simpletip是一個新生的輕量級的建立靈活的Tooltip的jQuery外掛。Tooltip可以附加到任何的元素 & 輕鬆風格的演示 & 定位。Tooltip可以是靜態的、動態的或者通過Ajax載入的。另外，可以應用任何組合的效果來使它們更有吸引力。

　　Source

　12. Colortip

　　它將在你頁面中元素的title屬性轉換為一系列豐富多彩的Tooltip。共有六個可用的顏色主題，所以你可以很容易的匹配你的設計。你也可以輕鬆地通過新增三個額外的樣式類到你的stylesheet和在colortip-1.0-jquery.js中的支援顏色陣列中新增一個元素來建立你自己的Tooltip。

　　Source

　13.TipTip

　　TipTip是一個非常輕量級和智慧的自定義Tooltip的jQuery外掛。它使用零影象，並且是通過CSS完全可定製的。TipTip會檢測瀏覽器視窗的邊緣以確保tooltip停留在當前視窗的大小。因此Tooltip將調整自身來顯示在要使用TipTip的元素的上下左右，這取決於要保持在瀏覽器視窗中的哪些是必要的。

　　Source

　14. (Mb) Tooltip

　　(mb)Tooltip是為你的使用jQuery的頁面提供的一個美麗的tooltip。只需很簡單的將你的內容作為title屬性的值，然後你就可以用這個聰明的漂亮的tooltip代替那醜陋的預設tooltip了。你也可以隨時禁用或啟用(mb)Tooltip。

　　Source

　15. Hovercard

　　這是一個免費的輕量級jQuery外掛，可以讓你使用懸停的label、link或任何你選擇的html元素來顯示相關聯的資訊。hovercard可以用在顯示個人簡歷、書籍作者和價格，通過Ajax載入相關聯的資訊，直接編輯等場景下。你也可以新增你的自定義資料來源，使用已有的card格式來顯示分析的資料。

　　Source