簡單漂亮的 CSS tooltip 提示框﹍(2) data-title 設定 + 疑難雜症排除

上一篇「 CSS 提示框懶人包實作」說明了 CSS tooltip 原理，不過懶人包畢竟無法處理各種變數，留言提出了各種異常狀況，因此本篇仔細說明不同狀態下的解決方式。

<< 請注意！本篇文章含會員限定內容 >>

一、待解決狀況

使用懶人包時，大致有以下問題──

• title 重複顯示：除了 tooltip 訊息框，瀏覽器也會額外顯示 title 屬性的訊息而造成重複，解決方法為「將屬性 title 改為 data-title」。
• 版面跑掉、CSS 異常：上一篇的留言提到這兩種狀況，多半是原來的 HTML 元素使用了「CSS 偽類」而導致衝突，可針對這些特定的 HTML 元素另外設定 CSS 來解決。
• 圖片無法顯示 tooltip：這個 tooltip 效果是利用 CSS 偽類來產生，而圖片的 HTML 標籤 IMG 無法處理 tooltip 的偽類效果，所以若在圖片放 title 訊息，這個 CSS tooltip 會無效。解決方法為，在 IMG 外面包覆別的 HTML 標籤，把 tooltip 訊息放在母元素。
• A 標籤異常：當 A 標籤的內容物過大(例如放了圖片)，會讓 tooltip 判斷區塊的高度錯誤，而導致異常現象。解決方法為，幫 A 標籤設定為區塊顯示即可。

除此之外，tooltip 的訊息「利用換行控制版面」也是必須的功能，本篇可一併處理此狀況，以下逐項說明實作方法。

二、使用 data-title 屬性 + 換行語法

1. 安裝程式碼

首先將上一篇的 CSS 碼，用記事編輯軟體將所有的 title 字串置換為 data-title，或是可直接參考以下的程式碼，紅字為異動的部分：

以上 CSS 碼的安裝方式請參考上一篇教學的步驟。


2. 更改範本內容

接著將範本中所有含 title 屬性的 HTML 標籤，將屬性改為 data-title 。例如原本的 HTML 內容如果為下：

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

請改為以下內容：

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

如果是 Blogger 範本，請特別注意 Blogger 有自創的語法，如果在範本中搜尋到 expr:title 這樣的字串，且你也想讓其代表的訊息內容以 tooltip 效果呈現，那麼請將該字串改為 expr:data-title。


3. tooltip 換行

程式碼 AD、AE 這兩行的紅字語法為新增的參數，能實現 tooltip 換行，方法為 title 的訊息之中加上字串 "&#xa;" 即為換行符號。

2015.1.29 補充：請參考「Blogger 範本裡為何這麼多亂碼」，& 開頭的字串都會被轉碼，所以如果要放在 Blogger 範本之中，換行符號 "&#xa;" 必須改為 "&amp;#xa;" 才行。


例如本站上方的按鈕「本站Hack及工具」，原本的 title 訊息為 "本站使用的 Blogger Hack 及小工具"，效果如下面這個按鈕，請將滑鼠移到按鈕之上：

本站Hack及工具

斷行的效果看起來不太好，於是我們將 title 訊息改為 "本站使用的 &#xa; Blogger Hack &#xa; 及小工具"，效果如下，這樣看起來好多了：

本站Hack及工具

三、版面異常

前面提過，這個 tooltip 的原理是利用 CSS 偽類來產生，使用了 :before 以及 :after，並利用了 position: absolute 來位移。因此，如果套用 tooltip 的 HTML 標籤，若也使用了上述相關 CSS 語法，那麼就可能造成版面位移、顯示異常等等各種情形，總之就是語法參數互相打架了。

如果對 CSS 語法不熟、不瞭解怎麼修改的話的話，簡單的方法就是這些 HTML 標籤不要使用 tooltip，把 data-title 的屬性移除。

如果對 CSS 有信心的話，除了自行進行細調參數之外，也可試著在原來的 HTML 標籤外面在包覆一層 HTML 標籤，例如 span，然後把 data-title 屬性附在這個 span 上，這樣應可避免 CSS 語法的衝突。

四、A 標籤異常狀態

直接舉例說明比較清楚，例如本站底部有一些社交分享相關的按鈕，在沒有更改參數的情況下，tooltip 效果是這樣的，請將滑鼠移到按鈕上：

很明顯 tooltip 的高度判斷出了問題對吧？因為 A 標籤的 display 預設為 inline(行內) ，區塊的高度就是行高(line-height)而已。若 A 標籤裡面放了圖片，且圖片超出行高，而 tooltip 仍會抓 A 標籤的行高值，那就會出現上面這些按鈕的異狀了；另外就是，A 標籤沒設定寬度時，tootltip 的置中值一樣可能抓得不準確，三角尖端可能會偏右。

瞭解問題後就容易解決了，將 A 標籤的 CSS 設定為 "display: inline-block; width: ??px;"(?? 填入圖片的寬度)，效果如下，tooltip 瞬間恢復正常了：

五、圖片無法顯示 tooltip

解決的原理如前所述，可以在 img 標籤外面包覆一個 HTML 標籤，例如 span，然後將 tooltip 訊息移往 span 標籤，並且同「四、A 標籤異常狀態」一樣設定為 inline-block，以下直接來看實例。

以下語法使用了 data-title，但無法出現 tooltip 訊息：

<img data-title="歡迎來到 WFU BLOG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizW3s3HghEoobUR5juPl6QpOV-zZR5MQDsHGRlCmAcgGUX7jql6Q19E4Lsd8cBRQeUum9Ltx5luiSMFm1A6s3TzgtH3syX2aDjALB5IaClMtIEd56978kbz60PdGJGjelw-Rk9q2SpP5yG/s100/wfublog-logo-8abeb7.png"/>

改為以下語法即可：

<span style="display: inline-block;" data-title="歡迎來到 WFU BLOG"><img src="http://1.bp.blogspot.com/-vhIWukZmniI/VA3My_ptRfI/AAAAAAAAKM0/DaF4uGRxB0Q/1200/wfublog-logo-8abeb7.png"/></span>

效果如下圖，請將滑鼠移到圖上：

六、其他主題

以上大致列出目前已知的問題及解決方法，另外 +Ken CHEN 於「留言板」#21 詢問 "文字提示 可以顯示圖片嗎？"。在 tooltip 放圖片是辦得到的，只是設定上比本篇更為麻煩，不過或許可以成為一個很好的應用，因此將另闢一篇專文討論。

CSS tooltip 系列文章：