簡單漂亮的 CSS 提示框(tooltip)懶人包實作﹍(1) 動畫效果 + 置中演算法

HTML 標籤屬性 title裡的提示訊息，在瀏覽器差不多延遲一秒才會出現。在資訊爆炸的時代，訪客閱覽文章多半施展 "超速讀"，相信更不會有耐心去臆測某個地方是否藏著 title 屬性、或等待一秒後的訊息浮現。使用 javascript(簡稱 js) 處理可讓 title 訊息立即顯現(就是所謂的 tooltip 效果)，還可做出各式外框、動畫、置中等等效果，這才是友善的使用者體驗設計，就像下面這個按鈕：



效果還不錯吧！不過特別的是，這並非使用 js 做出來的，而是純 CSS 效果。因為在「優化網站效能」的前提下，為了減少網頁 js 的使用，嘗試將一些 js 能輕易辦到的事，看看能否轉交給 CSS 完成。

好消息是這個構想成功了，且本文的安裝方式非常簡單(傳統的 CSS tooltip 製作方法很麻煩、步驟多)，複製貼上後整個網站就能立即套用效果。以下先說明製作原理，想直接安裝請跳至「二、安裝 CSS」。

一、CSS tooltip 製作原理及參考資料

1. CSS 效果

這次挑戰的 CSS tooltip，從前面的範例按鈕可看出效果有這些：

• tooltip 訊息外框 + 三角尖端
• tooltip 移動 + 淡入淡出動畫
• tooltip 位置置中

這三項效果沒有一件是簡單的，需要大量的 CSS 技巧，可說是一個很好的 CSS 組合拳範例，以下列出每個部分的參考資料來源。


2. TITLE 屬性

進入主題之前，不妨先認識一下 title屬性的特色與基本知識，請參考「自定義 Title 提示樣式」。本文原理跟這篇差不多，都是藉由處理網頁元素原本的 title 屬性，來達到懶人化的安裝，差別只在於該篇的執行媒介為 js、而本篇為 CSS。


3. 三角尖端效果

用 CSS 實現三角尖端需要特殊技巧，「toolip 訊息框 + 三角」的視覺效果 CSS 技術說明書請參考這篇「使用css實現全兼容tooltip提示框」。


4. 動畫效果

動畫效果比起靜態提示框，當然更能吸引訪客的眼球，不過 CSS3 的動畫語法，在低版本的 IE 無法支援，請讀者記住這件事，因此低階 IE 只能看到靜態畫面。

tooltip 的動畫 + 淡入淡出效果，CSS 技術層面的說明書請參考這篇「Pure CSS3 Animated Tooltip Cross Browser Tutorial」。


5. 置中演算法(Calc)

跟前面幾項比起來，這是最困難的一部分，tooltip 要能根據各種區塊的尺寸，自動計算出各種定位點(以及置中點)，這在舊的 CSS 語法是做不到的。不過 CSS3 推出的 Calc 語法，讓這件事成為了可能。

技術層面的說明書請參考這篇「CSS的神奇Calc運算」


6. 馬卡龍色碼

最後是幫 tooltip 加上漂亮的顏色，這部分參考了「開啟網頁裡的馬卡龍」提供的各式現成色碼。

二、安裝 CSS

進行安裝之前，請先確定要實現 tooltip 的網頁元素有 title 屬性及內容，否則這些 CSS 碼是沒有任何作用的，例如以下範例的紅字部分：

<a href="http://www.wfublog.com/" target="_blank" title="這裡填入提示訊息">WFU BLOG</a>

在修改範本之前，如果是第一次安裝的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請編輯範本中 </head>之前的內容，以 Blogger 為例，請到後台「範本」→「編輯 HTML」，游標點進範本區塊，搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：





基本上存檔後就能看到效果了。如果想自訂參數的話，比較簡單的可直接參照綠字的說明，複雜的請參照以下程式碼行號的說明：

H、N：這兩行的藍字參數若改為 1 代表不透明。

U、AM：這兩處的色碼必須一致，可參考前面「一、CSS tooltip 製作原理及參考資料」→「6. 馬卡龍色碼」，置換別的顏色。

W：這個數字是訊息框的寬度，可自行調整，但請記住這個數字，假設此數字為 A。

X：這個數字是訊息框的內襯值，也就是文字距離邊界的寬度，假設此數字為 B。

因此訊息框的實際寬度為 A + 2B → 也就是 (130px + 5px*2 = 140px) → 假設這個數值為 C。

Y：這一行的參數計算出訊息框在置中狀態下，左邊界的值為多少。使用 "100%" 這個參數可自動取得母元素的寬度，所以 (100% - C) / 2 就能求出 left 的正確值，無論母元素比訊息框來得寬、或窄，都能正確處理。

AS：這一行的參數代表製作出底部、高度各為 10px 的三角形，假設這個值為 D。為了讓訊息框與三角形無縫接軌，最好參數設定為 D+1(多 1px)。

AN：這一行的參數計算出三角形置中時，左邊界的值為多少。使用 "50%" 這個參數可自動取得母元素的一半寬度，讓三角形座落在母元素約一半的位置。但為了要置中，三角形本身需要扣掉一半的寬度，再扣掉左邊的內襯值，再扣掉無縫接軌的 1px，所以此行的演算法應為 50% - (D/2) - B - 1。

Z：這一行的參數代表訊息框動畫的起始座標，使用 "100%" 這個參數可自動取得母元素的高度，額外加 40px 代表從這個高度往下降，可自行修改 40px 這個高度。

AP：這是三角形動畫的起始座標，想要跟訊息框一起連動的話，應該是設定為 100% + 40px - D。我設定為 50px 是私自喜歡這樣的三角形動畫效果，讀者可自行比較兩者的差異。

I、O：這兩行分別為訊息框與三角形動畫結束的座標，原理同前，可自行調整參數。

三、補充說明

本篇的 CSS tooltip 懶人包有個明顯的缺點，不但 CSS 提示框會出現，且一秒後 title 的提示文字也會出現(只是兩者不會重疊就是了)，若使用 js 處理則可避免此現象。

另外在某些特殊狀況下，tootlip 會無法正常顯示，需要依不同狀況來調整語法，這些都是「安裝方式簡單」的懶人包後遺症。不過本篇不妨視為一個簡單的 DEMO 效果，以及 CSS 原理教學。讀者可以用最簡便的安裝方式先看到這個 CSS tooltip 效果，有了這篇的基礎概念後，系列文下一篇會仔細說明如何修改語法、參數，來達到最好的效果。