Sweet Tooltip 實際執行畫面

在網頁上有一些功能可能不是非常明顯或者是步驟容易混淆的功能，如果能夠讓滑鼠事件就能讓使用者了解接下來該做什麼步驟，一個小小的提示視窗對不了解網站的作業流程的使用者是非常有用的工具。Sweet Tooltip 是一個以 CSS3 和 jQuery 框架為基礎的提示訊息套件，裡面有包含了七種不同設計樣式的提示訊息方塊。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
//Sweet Tooltip 程式的 CSS3 設計樣式
<link rel="stylesheet" href="sweet-tooltip.css">
//使用 Google AJAX API 取得 jQuery 1.7.2 的 min 版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
//Sweet Tooltip 的主程式碼
<script type="text/javascript" src="sweet-tooltip.js"></script>


接下來在網頁上需要用到提示訊息方塊的地方加入
<a href="#" class="sweet-tooltip" data-style-tooltip="方塊的樣式" data-text-tooltip="顯示提示文字">
     連結內容
</a>

Sweet Tooltip 七種樣式的顯示圖

提示方塊的樣式名稱對照表 (data-style-tooltip)

上圖英文	樣式名稱
Sweet Strong	tooltip-sweet-strong
Mini Sick	tooltip-mini-slick
Big Grey	tooltip-big-grey
Nightly	tooltip-nightly
Shiny Red	tooltip-shiny-red
Soft Blue	tooltip-soft-blue
Big Yellow	tooltip-big-yellow

作者網站：http://www.webstuffshare.com/2012/03/sweet-tooltip-a-jquery-css3-tooltips/
檔案大小：258 KB(包含範例)
檔案下載：http://www.webstuffshare.com/download/SweetTooltip.zip
檔案備份：下載