2014年12月1日 星期一

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

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

Wayne Fu 0 A+
上一篇「 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 換行

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

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


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



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




三、版面異常


前面提過,這個 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/AVvXsEjfPQNVyzOqp04tBacUAj7aN4phFIeZQrd03YGUyiJmna5zjMriAUPxJO3Wz-2mnxiC4esoxQE9LALGaZ7NOJtA25t3hQ2zEsBmBMUgdyKuNAEJOxMRG1quQMwLEjwIXaIRdfYogXt_37VW/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 系列文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP