<< 請注意!本篇文章含會員限定內容 >>
一、待解決狀況
使用懶人包時,大致有以下問題──
- 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 碼,用記事編輯軟體將所有的
以上 CSS 碼的安裝方式請參考上一篇教學的步驟。
2. 更改範本內容
接著將範本中所有含
<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 有自創的語法,如果在範本中搜尋到
3. tooltip 換行
程式碼 AD、AE 這兩行的紅字語法為新增的參數,能實現 tooltip 換行,方法為
2015.1.29 補充:請參考「Blogger 範本裡為何這麼多亂碼」,
例如本站上方的按鈕「本站Hack及工具」,原本的 title 訊息為 "本站使用的 Blogger Hack 及小工具",效果如下面這個按鈕,請將滑鼠移到按鈕之上:
斷行的效果看起來不太好,於是我們將 title 訊息改為 "本站使用的 
 Blogger Hack 
 及小工具",效果如下,這樣看起來好多了:
三、版面異常
前面提過,這個 tooltip 的原理是利用 CSS 偽類來產生,使用了
如果對 CSS 語法不熟、不瞭解怎麼修改的話的話,簡單的方法就是這些 HTML 標籤不要使用 tooltip,把 data-title 的屬性移除。
如果對 CSS 有信心的話,除了自行進行細調參數之外,也可試著在原來的 HTML 標籤外面在包覆一層 HTML 標籤,例如
四、A 標籤異常狀態
直接舉例說明比較清楚,例如本站底部有一些社交分享相關的按鈕,在沒有更改參數的情況下,tooltip 效果是這樣的,請將滑鼠移到按鈕上:
很明顯 tooltip 的高度判斷出了問題對吧?因為 A 標籤的 display 預設為 inline(行內) ,區塊的高度就是行高(line-height)而已。若 A 標籤裡面放了圖片,且圖片超出行高,而 tooltip 仍會抓 A 標籤的行高值,那就會出現上面這些按鈕的異狀了;另外就是,A 標籤沒設定寬度時,tootltip 的置中值一樣可能抓得不準確,三角尖端可能會偏右。
瞭解問題後就容易解決了,將 A 標籤的 CSS 設定為 "display: inline-block; width: ??px;"(?? 填入圖片的寬度),效果如下,tooltip 瞬間恢復正常了:
五、圖片無法顯示 tooltip
解決的原理如前所述,可以在 img 標籤外面包覆一個 HTML 標籤,例如
以下語法使用了 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 系列文章:
沒有留言:
張貼留言注意事項:
◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。