12/28/2014

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

簡單漂亮的 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運算



二、安裝 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 系列文章:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

22 則留言:

  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 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP