2014年12月28日

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

A+
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 效果,有了這篇的基礎概念後,系列文下一篇會仔細說明如何修改語法、參數,來達到最好的效果。


CSS tooltip 系列文章:

21 則留言:

  1. 原來如此,我看你的出現的好快哦!一般的都會延遲出現!感謝分享!期待後續的哦!謝謝

    回覆刪除
  2. 感謝您分享程式碼,改天裝裝看!

    之前有嘗試安裝這個功能,我用中國的原始碼,結果悲劇,完全不能呈現,也造成部落格版面跑位,只好放棄了。

    回覆刪除
    回覆
    1. 這篇懶人包大部分情形都可正常顯示,少部分情形例如你提到的「版面跑位」,可參考下一篇的說明。

      刪除
    2. 目前看到,使用「系列文加強版」會無法顯示文字內容

      刪除
    3. 是的,因為「系列文加強版」這個工具剛好使用到 title 屬性,執行完畢後將 title 內容清空,導致提示框無內容。

      解決的方法在下一篇,如果 ken 想先進行也是可以,必須將範本中所有的 title 置換為 data-title 這樣的字串,然後將本文 CSS 所有的 title 字串置換為 data-title,這樣就是最佳的顯示效果了。

      刪除
    4. 你的意思是,使用Notepad++將範本中所有的title換成data-title是嗎?那是不是以後寫文章時需要使用文字提示時,也是用data-title而不是title?應該是這個意思吧!?哈哈

      刪除
    5. 理論是如此,本文的程式碼可以這麼處理,但範本其他內容無法這麼做,因為不是所有 blogger 範本中的 title 字串都能置換,所以只能一個個檢查、手動置換了!

      刪除
    6. 喔~~剛剛看了一下範本,很多地方也是使用title(小工具顯示的名稱也是title)這些就是不能更換的。

      刪除
    7. 是的沒錯,所以有點麻煩。如果沒有「系列文加強版」的問題、也沒其他問題的話,那麼這篇懶人包其實滿方便的,哈哈~

      刪除
    8. 所以說,這樣修改過後,原本一秒後會顯示的 title就不會顯示嚕??
      不過,能單純使用CSS就做出效果,如此就不需要太擔心加了一個功能會影響網頁速度,也算是平衡掉這個所謂的麻煩了!畢竟只要麻煩的處理一次就好!

      刪除
    9. 沒錯~花一次的時間,可省更多時間 !

      刪除
  3. 基本上安裝的方式都懂了,就是不知道如何讓文字在框裡出現?看了幾次好像也沒看到的樣子。另外,也想跳痛問一下,請問「按此展開智員內容」的文字底色是怎麼弄的呢?

    回覆刪除
    回覆
    1. >> 不知道如何讓文字在框裡出現

      要先設定 title 的內容才能出現,可以先閱讀「一、CSS tooltip 製作原理及參考資料」→「2. TITLE 屬性」的參考文章連結,那篇有 HTML 碼如何加 title 的範例 → Anyway, 我在「二、安裝 CSS」開頭放了個範例,看看能否理解。

      >> 「按此展開智員內容」的文字底色是怎麼弄的呢?
      你是指「按此展開會員限定內容」的隱藏內容嗎?可參考「讓網頁使用各種特殊文字區塊__(1) 安裝與使用」、「讓網頁使用各種特殊文字區塊__(2) 實作範例──公告+修訂區塊

      刪除
  4. 太神拉,之前安裝過的提示泡泡,要額外裝 js 才能運作,而且還會拖累網頁速度。
    而且這個配色跟我的版型好搭 XD

    可惜我的新版型好像沒甚麼有設定 title 的東西 Orz 真是白費了這個好東西...

    回覆刪除
    回覆
    1. 剛剛發現了一個問題,就是 content 會跟其他有用到 content 的內容相衝突,導致原本的 content 無法正常顯示 Orz

      刪除
    2. 自己的解決方案:讓用到 content 的那個元素不要 加入 title ,他就不會顯示,也就不會衝塗了...

      刪除
    3. 呵呵,請見「三、補充說明」,這篇是懶人包,下一篇會有更多說明。

      >> 可惜我的新版型好像沒甚麼有設定 title 的東西

      另外,需求可以自己創造啊..XD 很多按鈕可以加入 title,有了 tooltip 的加持,可以增加訪客按下機會 ^^

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。