<< 請注意!本篇文章含會員限定內容 >>
一、待解決狀況
使用懶人包時,大致有以下問題──
- 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/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 系列文章:
看來各處要逐一修改真的還蠻"厚工"的= =魔鬼果然藏在細節裡阿!!整個部落格處處是細節阿~~
回覆刪除看到一個問題,"文章瀏覽數"顯示的部分被限制了寬度,原本的反而不會
刪除CSS 的眉眉角角非常多,這真的需要不少基本功~~
刪除關於「文章瀏覽數」,你指的應該是我的部落格,每個範本的預設 CSS 都不一樣,像你的就沒被限制。因為我的文章區塊被設定了 overflow: hidden,不准超出邊界,這個 CSS 參數可以避免版型破裂,我是可以接受,因此就沒去改這一點了~
原來是範本的問題!
刪除找時間來整理嚕!也謝謝你的用心!^^
@Ken 關於提示裡可以內嵌圖片的問題個人有一些看法。
刪除首先是 Tooltip 能不能作到?答案是可以的。但是我不建議這樣使用。
凡是網頁物件的設計應該建立主從關係;而 Tooltip 就是屬於附屬的效果。如果擴張它的使用效果當然很酷!但是您有沒有想過使用者在滑入位置時,如果剛好遇到視窗邊緣呢?網友是否還要趕快將視窗「扶正」才能看到提式裡的圖片?
其二,行動裝置的支持度。這樣的效果對於行動裝置沒有實效(行動裝置不使用滑鼠動作的)。建議使用燈箱或超連結,同時也能避免過度的圖檔載入。
To Mark:我當時看wayne的文章時有用手機看過,示範的項目是可以點擊該字串來跳出提示,所以我才想說是否可以在我要的髮型連結字串後面加上"預覽"兩個字讓讀者點擊,跳出圖片,讓讀者可以先看一下預覽圖!如此在行動版上也可以使用!只是我沒想到視窗邊緣的問題以及圖片過度載入的問題,,,
刪除不過您說的也是,考量到這兩個因素的話,超連結或是燈箱似乎也是個簡單的解決方式,不曉得wayne會有什麼想法!如果不是像我的用法要在一篇文章中放入很多提示,單篇少量使用或許也是個不錯的閱讀體驗,有圖有真相?!呵呵
@Ken 使用 js 的方式在行動版一樣可以顯示效果,只是把滑鼠動作都解釋為 click,並不是說行動版不能使用。由於行動裝置核心由電腦版為基礎所修改的,但是兩者有明顯區分的資源與發展,例如 CSS UX 與 jQuery 都已經有不同版本。
刪除也許有一天,行動版核心精簡了滑鼠動作而被移除了,屆時移到「預覽」上面可能不會有任何反應。如果只是單純的文字提示沒出現那就算了,提式裡內嵌示意圖已經屬於主要物件,修改起來很麻煩,畢竟不像 js 一樣修改 click 或 touch 的命令式就可以繼續使用。
實際的問題在於手機螢幕這麼小,內嵌的圖片提示尺寸要設定多少呢?除非「預覽」字樣每次都正好在螢幕的正中央;而且使用 max-width: 320px 以下的尺寸,否則圖片遇到螢幕邊緣被切掉的機會非常大。此時滑動螢幕也無法看到被切掉的內容到底是什麼,這情形稍微預想一下就知道,所以我才會說在行動版沒有實效(應該算反效果)。
mark 提出的考量點很正確,tooltip 畢竟是個網頁為主的效果,行動裝置上無法期待效用。tooltip 放入圖片的話,需要評估以下:
刪除1. 訪客來自行動裝置的比例?是否需要為行動裝置另外設計效果?
2. 網頁中 tooltip 放圖片的比例多不多?
tooltip 訊息放圖片比例大的話,的確得預先載入許多圖片,可能用 js 處理較佳、或改用 mark 建議的方案。如果圖片是重要訊息的話,的確應該用明顯的方法讓其出現,而非讀者在不經意之中 hover 才跑出來。
而且若一個頁面使用非常多的「tooltip + 圖片」,設定上也很麻煩,不太實用,不算普遍性的功能,因此下一篇若寫此相關主題時,將只著重在設定的技巧、語法,也就是讓讀者知道有這樣的使用方式就好,存在這樣的應用方式,不算是特別推廣這樣的功用。
嗯嗯!瞭解!我目前的狀況是「行動裝置訪客五成多+需要多處使用圖片」應該就如Wayne及Mark所說的比較不建議的狀況吧!如果是這樣,或許就只能局部使用或是使用Marx說得替代方案了!感謝兩位哦^^
刪除@ken, 根據你提過的的這篇 http://www.hairblog.tw/2014/12/2015HairstyleCollection.html,感覺上一個主題可附一張圖。因為文章內容不算非常多,手動加圖還不算大工程,只是在構圖上,擺大圖的效果好,還是擺縮圖(點擊後出現fancybox效果)效果好,需要自行拿捏了~
刪除一個主題擺放一張圖也是可行,我比較在意的是讀者看了這篇後會不會變成只是走馬看花的概略看一下就跳離開了(因為有圖,但是不多)所以才想說單純文字連結加上能夠預覽的方式,不曉得這樣思考是否正確= =
刪除如果用fancybox,是不是把程式碼放在單這篇就好??這樣是不是就不會每篇文章都執行而導致每個頁面都變慢??
想知道正確與否,可以實際交叉測試訪客的反應,不過前面 mark 已經提過他的看法了。
刪除另外 fancybox 放在單篇文章的執行結果,一樣要測試看看才知道,因為這樣做跟原本的安裝方式不太一樣。
好的!!我再來試試看喔!!謝謝Wayne及Mark的建議喔!
刪除不用客氣,我只是路過 XD
刪除我記得 Wayne 把 Fancybox 程式碼和 CSS 簡化過了,檔案應該不大。如果 Ken 經常需要圖片展示可以考慮如何使用較好。提示內嵌圖片顯示與否,在行動版可以用 @media 去控制。
TO Mark:您客氣了!^^
刪除看來最近要做的事情還頗多的~~須要點時間一一測試,感謝喔!
成功搞定後我反而不知道該用在哪處才比較好了……
回覆刪除現在有點好奇有沒有辦法做到http://pfcz.org/wordpress-beautification-short-code-prompt-box-functionality/ 這一類的ORZ
這表示目前也許你還用不到這個功能,當需要出現時,再來使用就好囉!
刪除BTW, 除了附上的網址,也請描述一下你要表達的意思~ ^^
要描述對我來說實在太難啦XD!不過方式和Toolip差不多,比較像美化過後的顏色底色或是引用CODE,今天看了特殊文章區塊的文覺得可以自己先研究一下~
刪除