當我們把滑鼠放在一個連結上時,如果該連結設定了title屬性,就會懸浮顯示一個淡黃色背景的文本提示,這就是最基礎的Tooltips提示工 具。但其平凡的樣子實在很難讓人注意。利用javascript則可以 產生一些漂亮、進階的tooltips,這些提示資訊不僅僅限於文本,還可以是圖片,音頻,視頻甚至架構,並且可以包含html元素,方便使用CSS來美化。
先吸引到訪問的眼球,才能達到提醒的目的。16款Javascript Tooltips提示工具。
1. HelpBalloon.js (演 示地址)
一個可靈活控制
2. jQuery.UI MessengerOutlook like message notification Widget (示範地址)
這個jquery.UI控制項類似於 MessengerOutlook訊息彈出提醒框。
3. Step by Step (示範地址)
該指令碼能夠為訪問者逐步地展示和介紹當前頁面所包含的內容,效果類似於Tooltips。
4. BeautyTips
BeautyTips是一個jQuery Tooltip外掛程式.
5. qTip
6. Simple tooltip
Simple tooltip是一個非常簡單的Tooltip jQuery外掛程式。
7. Side Navigation Tooltip (示範地址)
利用jQuery為側面導覽功能表添加Tooltips氣泡提示說明。
8. Notimoo (示範地址)
Notimoo這個Mootools外掛程式能夠為你的網站添加類似於Growl風格的訊息通知。
9. Ajax Tooltip script
這個Tooltip根據頁面標籤title屬性指定的連結地地通過ajax擷取氣泡要顯示的內容。
10. Growler (示範地址)
Growler是一個採用Prototype架構開 發,用於實現在頁面右下角或其它位置顯示通知訊息。類似於QQ或MSN的右下角提示訊息。
11. jquery-rollover-tooltip (演 示地址)
利用jQuery實現當滑鼠移過表徵圖上方時會出現一個氣泡 (tooltip),氣泡中的內容讀取自html tags屬性。
12. MopTip (示範地址)
MopTip是一個採用jQuery開發的Tooltips外掛程式。經測試支援Safari4、firefox3、Opera9、 IE6、IE7、IE8、Google crome等瀏覽器,且介面美觀。
13. Mobile Tooltip widget
一個可以在圖片上顯示Tooltips的GWT 控制項。隨著滑鼠在圖片上移動,Tooltips也會跟著移動。
14. Roar (示範地址)
Roar是一個可以在螢幕右下角彈出訊息提醒的Mootools外掛程式。類似於QQ或MSN右下角彈出訊息提示。
15. CSS ToolTip
可以使用CSS與JavaScript設計你 Tooltips的風格。
16. Horizontal Tooltips Menu (示範地址)
一個帶Tooltip提示的橫向水平菜單,Tooltip滑動橫跨在菜單面板下。