CSS tooltip 系列文前兩篇「安裝懶人包」及「疑難雜症排除」詳細說明了安裝及解決所有問題的方式。而 +Ken CHEN 提出了「CSS tooltip 能否顯示圖片」的問題，答案雖然是可以，但很麻煩，且需要考量的因素不少。+Mark X 在前一篇留言的觀點很正確：「網頁物件的設計應該建立主從關係；而 Tooltip 就是屬於附屬的效果。」一般來說，圖片是可以抓住訪客目光的標的物，絕大多數情況下，應該將其設計為主要內容，而非隱藏在 tooltip 之中。而且行動裝置無法實現滑鼠 hover 效果，所以 CSS tooltip 是個只能在網頁展現的效果。如果真要在提示框之中安插圖片，必須要有很好的理由，證明這圖片不是必要內容、以輔助的作用為主，沒被訪客看到也影響不大。
因此，本篇的主題改為討論，哪些情境適合「tooltip + 圖片」的應用，以下提出一些案例參考，並說明語法如何實現。
一、tooltip + 圖片的應用
1. 家樂福官網：預覽標題內容
家樂福官網：http://www.carrefour.com.tw/
進入官網，滑鼠移到上方導覽列後，可預覽這個項目的內容及預覽圖片。如下圖，這是移到「家樂福生活」後的畫面，紅框為提示訊息中的圖片：
左側的導覽列一樣有預覽訊息，如下圖，這是移到「電腦/3C」後的畫面，紅框為提示訊息中的圖片：
雖然以上效果並非 CSS tooltip，不過這些範例代表一種可能的應用方式，當導覽列的文字項目敘述，無法讓訪客瞭解細節、無法決定是否前往這個項目時，「CSS toolip + 圖片 + 文字敘述」可以做出更完整的說明。
2. AT&T 官網：預覽輪播圖片內容
AT&T 官網：http://www.att.com/
「AT&T」是目前行動電話服務供應商的世界龍頭，其官網首頁有個輪播圖片設計的很好，請見下圖：
一般輪播圖片設計的索引圓圈，訪客像是玩刮刮樂，不曉得點下去會出現什麼，所以也懶得點。而 AT&T 的五個輪播索引小圓圈，當滑鼠移到對應的圓圈時，就會出現該輪播項目的縮圖及說明文字。就像上圖移到第三個小圓圈，便立即出現這個項目的縮圖及說明文字，加快了訪客決定要點選那個輪播項目的時間。
二、CSS 語法說明
看完以上的範例，在設計上「tooltip + 圖片」的應用其實還不錯，只是用 CSS 實現不是最佳解，以下來說明 CSS 的語法。首先必須先瞭解「簡單漂亮的 CSS tooltip 提示框﹍(2) data-title 設定 + 疑難雜症排除」→「二、使用 data-title 屬性 + 換行語法」的內容。
1. 修改 tooltip 內容
CSS tooltip 提示框出現的內容，是由 T 行參數 content 的內容決定的。先利用偽類
content: attr(data-title);從該行內容可看出，tooltip 的內容是抓取該區塊
content: url(圖片網址);括弧中的圖片網址就是代表填入 http 開頭的網址字串。實際操作一遍就會發現，這麼改的結果，會讓所有套用 tooltip 的區塊一律顯示同一張圖片，覆蓋掉原本每個區塊各自抓取
2. tooltip 含圖片+文字
如果要讓 content 的內容可同時顯示圖片及文字，可參考「content 使用說明」，合併各種參數使用，例如以下的語法可同時顯示字串、圖片、
content: "先顯示圖片" url(圖片網址) "再顯示文字" attr(data-title);如果每個 tooltip 想要顯示不同的圖片，那麼工程將會非常浩大，每個單獨 tooltip 得設定個別的 class 或 id，這些個別的 class 或 id 得各自設定 CSS、設定 tooltip 要顯示的圖片網址。
由於操作麻煩、實用價值不高，就不特別列出完整語法了，想測試的話，經由以上說明應可自行實作出來。
三、用 Javascript 實現「tooltip + 圖片」
在 CSS3 沒有新的參數語法出現之前，要實現「tooltip + 圖片」最方便的方法還是得藉由 js。以「自定義 Title 提示樣式 開啟網頁裡的馬卡龍」→「文字提示安裝方法」為例，請按照該篇步驟，依序進行 CSS、jQuery 的安裝，接著將原本的 js 語法改為以下，可將圖片加入 tooltip：
<script>
$(function() {
$("a,img,button").each(function(e) {
if (this.title) {
var t = this.title;
var src = $(this).attr("data-src");
var x = 30;
var y = -45;
$(this).mouseover(function(e) {
this.title = "";
$("body").append("<div id='tooltip'><img src='" + src + "'/></div>");
$("#tooltip").css({
left: e.pageX + x + "px",
top: e.pageY + y + "px",
opacity: "0.8"
}).fadeIn("slow", "swing")
}).mouseout(function() {
this.title = t;
$("#tooltip").remove()
}).mousemove(function(e) {
$("#tooltip").css({
left: e.pageX + x + "px",
top: e.pageY + y + "px"
})
})
}
});
});
</script>以上程式碼沒有配合本篇的主題進行優化，純粹 DEMO 之用。紅字的部分為修改 mark 原始碼的內容。藍字的參數可調整 tooltip 的 X、Y 軸距離，以及透明度。
<a href="http://www.wfublog.com/" data-src="http://1.bp.blogspot.com/-vhIWukZmniI/VA3My_ptRfI/AAAAAAAAKM0/DaF4uGRxB0Q/s100/wfublog-logo-8abeb7.png" title="WFU BLOG">WFU BLOG</a>最後是要顯示「tooltip + 圖片」的 HTML 碼，例如下面這個展示效果用的按鈕，滑鼠移過去可看到效果。可參考以上的 HTML 碼來修改，紅色字串可改為自訂的圖片網址，其他字串請自行修改：
四、文章列表的應用
使用 js 的威力在於可批次處理，例如「文章列表__依日期排列」，在取得資料的過程就能拿到縮圖網址，如果配合以上的 js 碼，就能輕鬆做出「滑鼠移到文章標題時，tooltip 顯示文章縮圖」這樣的效果。
由於本站屬於教學性質，就算文章標題配上縮圖也不一定效果比較好，所以就沒另外弄範例了。不過如果是「美食、旅遊、攝影」等性質的文章列表，或許「文章列表 + tooltip + 圖片」就是個可以嘗試的構想了，相信預覽圖片的美味食物、壯麗景觀可大大增加訪客點擊的誘因。
有了本文的這些範例，希望能拋磚引玉，讓讀者對於 tooltip 的設計有更多應用與延伸。
CSS tooltip 系列文章：