2014年12月30日

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

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="http://1.bp.blogspot.com/-vhIWukZmniI/VA3My_ptRfI/AAAAAAAAKM0/DaF4uGRxB0Q/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 系列文章:

18 則留言:

  1. 看來各處要逐一修改真的還蠻"厚工"的= =魔鬼果然藏在細節裡阿!!整個部落格處處是細節阿~~

    回覆刪除
    回覆
    1. 看到一個問題,"文章瀏覽數"顯示的部分被限制了寬度,原本的反而不會

      刪除
    2. CSS 的眉眉角角非常多,這真的需要不少基本功~~

      關於「文章瀏覽數」,你指的應該是我的部落格,每個範本的預設 CSS 都不一樣,像你的就沒被限制。因為我的文章區塊被設定了 overflow: hidden,不准超出邊界,這個 CSS 參數可以避免版型破裂,我是可以接受,因此就沒去改這一點了~

      刪除
    3. 原來是範本的問題!
      找時間來整理嚕!也謝謝你的用心!^^

      刪除
    4. @Ken 關於提示裡可以內嵌圖片的問題個人有一些看法。
      首先是 Tooltip 能不能作到?答案是可以的。但是我不建議這樣使用。

      凡是網頁物件的設計應該建立主從關係;而 Tooltip 就是屬於附屬的效果。如果擴張它的使用效果當然很酷!但是您有沒有想過使用者在滑入位置時,如果剛好遇到視窗邊緣呢?網友是否還要趕快將視窗「扶正」才能看到提式裡的圖片?

      其二,行動裝置的支持度。這樣的效果對於行動裝置沒有實效(行動裝置不使用滑鼠動作的)。建議使用燈箱或超連結,同時也能避免過度的圖檔載入。

      刪除
    5. To Mark:我當時看wayne的文章時有用手機看過,示範的項目是可以點擊該字串來跳出提示,所以我才想說是否可以在我要的髮型連結字串後面加上"預覽"兩個字讓讀者點擊,跳出圖片,讓讀者可以先看一下預覽圖!如此在行動版上也可以使用!只是我沒想到視窗邊緣的問題以及圖片過度載入的問題,,,
      不過您說的也是,考量到這兩個因素的話,超連結或是燈箱似乎也是個簡單的解決方式,不曉得wayne會有什麼想法!如果不是像我的用法要在一篇文章中放入很多提示,單篇少量使用或許也是個不錯的閱讀體驗,有圖有真相?!呵呵

      刪除
    6. @Ken 使用 js 的方式在行動版一樣可以顯示效果,只是把滑鼠動作都解釋為 click,並不是說行動版不能使用。由於行動裝置核心由電腦版為基礎所修改的,但是兩者有明顯區分的資源與發展,例如 CSS UX 與 jQuery 都已經有不同版本。
      也許有一天,行動版核心精簡了滑鼠動作而被移除了,屆時移到「預覽」上面可能不會有任何反應。如果只是單純的文字提示沒出現那就算了,提式裡內嵌示意圖已經屬於主要物件,修改起來很麻煩,畢竟不像 js 一樣修改 click 或 touch 的命令式就可以繼續使用。

      實際的問題在於手機螢幕這麼小,內嵌的圖片提示尺寸要設定多少呢?除非「預覽」字樣每次都正好在螢幕的正中央;而且使用 max-width: 320px 以下的尺寸,否則圖片遇到螢幕邊緣被切掉的機會非常大。此時滑動螢幕也無法看到被切掉的內容到底是什麼,這情形稍微預想一下就知道,所以我才會說在行動版沒有實效(應該算反效果)。

      刪除
    7. mark 提出的考量點很正確,tooltip 畢竟是個網頁為主的效果,行動裝置上無法期待效用。tooltip 放入圖片的話,需要評估以下:

      1. 訪客來自行動裝置的比例?是否需要為行動裝置另外設計效果?
      2. 網頁中 tooltip 放圖片的比例多不多?

      tooltip 訊息放圖片比例大的話,的確得預先載入許多圖片,可能用 js 處理較佳、或改用 mark 建議的方案。如果圖片是重要訊息的話,的確應該用明顯的方法讓其出現,而非讀者在不經意之中 hover 才跑出來。

      而且若一個頁面使用非常多的「tooltip + 圖片」,設定上也很麻煩,不太實用,不算普遍性的功能,因此下一篇若寫此相關主題時,將只著重在設定的技巧、語法,也就是讓讀者知道有這樣的使用方式就好,存在這樣的應用方式,不算是特別推廣這樣的功用。

      刪除
    8. 嗯嗯!瞭解!我目前的狀況是「行動裝置訪客五成多+需要多處使用圖片」應該就如Wayne及Mark所說的比較不建議的狀況吧!如果是這樣,或許就只能局部使用或是使用Marx說得替代方案了!感謝兩位哦^^

      刪除
    9. @ken, 根據你提過的的這篇 http://www.hairblog.tw/2014/12/2015HairstyleCollection.html,感覺上一個主題可附一張圖。因為文章內容不算非常多,手動加圖還不算大工程,只是在構圖上,擺大圖的效果好,還是擺縮圖(點擊後出現fancybox效果)效果好,需要自行拿捏了~

      刪除
    10. 一個主題擺放一張圖也是可行,我比較在意的是讀者看了這篇後會不會變成只是走馬看花的概略看一下就跳離開了(因為有圖,但是不多)所以才想說單純文字連結加上能夠預覽的方式,不曉得這樣思考是否正確= =
      如果用fancybox,是不是把程式碼放在單這篇就好??這樣是不是就不會每篇文章都執行而導致每個頁面都變慢??

      刪除
    11. 想知道正確與否,可以實際交叉測試訪客的反應,不過前面 mark 已經提過他的看法了。

      另外 fancybox 放在單篇文章的執行結果,一樣要測試看看才知道,因為這樣做跟原本的安裝方式不太一樣。

      刪除
    12. 好的!!我再來試試看喔!!謝謝Wayne及Mark的建議喔!

      刪除
    13. 不用客氣,我只是路過 XD
      我記得 Wayne 把 Fancybox 程式碼和 CSS 簡化過了,檔案應該不大。如果 Ken 經常需要圖片展示可以考慮如何使用較好。提示內嵌圖片顯示與否,在行動版可以用 @media 去控制。

      刪除
    14. TO Mark:您客氣了!^^
      看來最近要做的事情還頗多的~~須要點時間一一測試,感謝喔!

      刪除
  2. 成功搞定後我反而不知道該用在哪處才比較好了……
    現在有點好奇有沒有辦法做到http://pfcz.org/wordpress-beautification-short-code-prompt-box-functionality/ 這一類的ORZ

    回覆刪除
    回覆
    1. 這表示目前也許你還用不到這個功能,當需要出現時,再來使用就好囉!
      BTW, 除了附上的網址,也請描述一下你要表達的意思~ ^^

      刪除
    2. 要描述對我來說實在太難啦XD!不過方式和Toolip差不多,比較像美化過後的顏色底色或是引用CODE,今天看了特殊文章區塊的文覺得可以自己先研究一下~

      刪除

張貼留言注意事項:

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