有用的工具提示教程和 jQuery 插件
已發表: 2010-03-15工具提示是一種常見的圖形用戶界面元素。 它與光標結合使用，通常是鼠標指針。 用戶將光標懸停在一個項目上，而不單擊它，並且可能會出現一個工具提示——一個小的“懸停框”，其中包含有關懸停在該項目上的信息。
我已經為 Tooltips 編譯了一些教程和 jQuery 插件。
1. TinyTips - 用於工具提示的輕量級 jQuery 插件
TinyTips 是一個非常輕量級的 jQuery 插件，它可以為頁面上的幾乎任何元素添加工具提示。 徹底記錄和設計師友好。
2. 使用 jQuery 進行 Flickr 風格的照片標記
jQuery Photo Tagger 大約有 1,000 行代碼。 因此，您可以查看項目頁面或親自嘗試在線演示。 請注意，單擊鼠標創建熱點時必須按住 CTRL 鍵。
演示 | 下載
3. TipTip 自定義工具提示 jQuery 插件與零圖像
TipTip 使用 title 屬性，就像本機瀏覽器工具提示一樣。 但是，當使用 TipTip 時，標題將被複製然後從元素中刪除，這樣瀏覽器工具提示將不會顯示。
TipTip 總共只生成一組彈出元素，而不是為每個應用了 TipTip 的元素生成一組彈出元素。 這有助於加快處理速度並減少處理時間。 生成的元素都是 div 元素，並附加到 body 元素的末尾。
4. 如何使用 CSS3 構建新的視覺註釋
ZURB 教會了我們如何構建新的視覺註釋。 該解決方案在技術上並不太複雜。 在 Notable 中，他們接受了優雅降級的概念：他們利用新的 CSS 技術可以乾淨地降級到舊瀏覽器。
演示
5. 使用 Pluralink 將鏈接顯示為下拉列表
Pluralink 是一個很棒的 javascript 插件，可以在你的文本中排列多個鏈接。
6. CSS & jQuery 的灰度懸停效果
帶有 CSS 和 jQuery 的灰度懸停效果依賴於 CSS Sprites 和幾行 jQuery，但在實現之前需要做一些準備。 不推薦用於大型項目，可能最適合展示作品集。
7. 使用 AnyZoomer jQuery 插件仔細觀察
你有一個小區域。 你把鼠標懸停在它上面。 會彈出一個區域，讓您放大查看。 這是一個 jQuery 插件。 我不會告訴您應該將它用於什麼或詳細說明用例場景。 你自己的創造力可以幫助你。
演示
8. 使用 JSON 和 jQuery 創建內容豐富的工具提示
本教程將演示如何使用從 JSON 數組中提取的信息構建由 jQuery 提供支持的工具提示。
演示
9. 用 Pretty (mb)Tooltip 替換您的默認工具提示
(mb)Tooltip 是一個漂亮的 jQuery 網頁工具提示。
下載
10. Captify 顯示漂亮的圖像標題出現在翻轉
Captify 是一個由 Brian Reavis 編寫的 jQuery 插件，用於顯示在翻轉時出現的簡單、漂亮的圖像標題。 它已經在 Firefox、Chrome、Safari 和糟糕的 Internet Explorer 上進行了測試。 Captify 的靈感來自 ImageCaptions，這是另一個用於顯示此類標題的 jQuery 插件。
11. 使用 imgPreview jQuery 插件預覽圖像
Peter Higgins 創建了 Dojo Zoomer。 它分為3個面板。 通過將鼠標懸停在左側面板上的圖像上，右側面板會動態顯示圖像的裁剪部分，以便您可以明確地專注於您感興趣的主圖像部分。
12. GPL下的jQuery Javascript Image Magnifier
JQZoom 是一個建立在流行的 jQuery javascript 框架之上的 javascript 圖像放大鏡。jQzoom 是一個很棒且非常易於使用的腳本來放大你想要的東西。
13. 使用 jQuery 和 CSS 的簡單透明工具提示
CSS 工具提示在現代網頁設計中非常流行，並且與流行的看法相反，創建它們真的很容易，尤其是使用所有如此流行的 javascript 框架之一。
演示
14. Magic Toolbox – Javascript 和 Flash 圖像縮放工具
Magic Toolbox 創建了 2 個驚人的 javascript 圖像縮放工具（Magic Zoom 和 Magic Magnify）。 Magic Zoom 是一個 JavaScript 縮放工具。 這是以令人難以置信的細節顯示圖像的最佳方式。
15. Prototip 2 - 輕鬆創建漂亮的工具提示
Prototip 允許您使用 Prototype javascript 框架輕鬆創建簡單和復雜的工具提示。
演示
16. 使用 jQuery 最簡單的工具提示和圖像預覽
最簡單的工具提示和圖像預覽是滾動鏈接或縮略圖時出現的類似工具提示的氣泡彈出窗口之一。
演示
17. 帶有 jQuery 的 Coda 樣式彈出氣泡工具提示
Coda 是適用於 Mac 的新 Web 開發工具之一——它在設計人員和開發人員中很受歡迎。
18.標記可點擊圖像區域顯示彈出工具提示
Taggify 是一個網絡小部件，它允許博客作者和出版商通過添加鏈接到某些圖像的 reqions 的圖像工具提示來增強他們的網站。
演示
19. 帶有 Javascript 和 CSS 的不起眼的氣泡工具提示
Bubble Tooltips 是一種將帶有氣球形狀的精美工具提示（通過一些 CSS 和 javascript）添加到任何網頁的簡單方法。
演示
20. Prototype 和 Scriptaculous 的淡入淡出工具提示
CoolTips 是一種輕量級、不顯眼的 JavaScript 網絡瀏覽器工具提示替換技術。
CoolTips 用於替換傳統的網絡瀏覽器工具提示。 工具提示獲取標題屬性的內容，因此它完全不顯眼。 CoolTips 是一個基於 Prototype JS 和 script.aculo.us 框架的 OO 類。
21. Sweet Titles 透明和淡化工具提示
Sweet Titles Fading Tooptips 不是從 NICE Titles 的仿製品，也不是試圖改進 Dunstan 的修改嘗試。 而且它絕對不是從 Dynamic Drive 中的事件處理程序感染腳本之一中刪除的。
演示
22. Prototip 大多數功能 Prototype 的工具提示
Prototip 允許您使用 Prototype javascript 框架輕鬆創建簡單和復雜的工具提示。 如果您還使用 Scriptaculous，您甚至可以為它們添加一些不錯的效果。
演示
23. BoxOver DHTML/Javascript 輕量級工具提示
BoxOver 使用 javascript / DHTML 在網站上顯示工具提示。 然而，工具提示的實現不需要 DHTML 或 javascript 知識。 通過設置標籤的“標題”屬性，可以設置許多調整以根據您的需要對其進行自定義。