FancyTooltips Fix

FancyTooltips，源自Nice Titles，是一個很流行的wordpress plug-in。Nice Titles顧名思義就是顯示更漂亮的title屬性，而FancyTooltips除了title，還支援<acronym> <abbr> <ins> <del>這些標籤。當滑鼠游標指到這些link/text的時候，就會秀出一個漂亮，且包含有用資訊的方框(如同本站所使用的)。

不過FancyTooltips，搭配Firefox 1.5+顯示時，有一個缺點，就是不明原因，有時候會重覆秀出同樣的內容2~3次(例圖)。前陣子在整理站台時想把它改好，javascript功力很弱的我，馬上體會到javascript很難debug。就算用debugger，會在hit breakpoint的時候focus out，沒remote debug，要用來處理像這種和hover有關的東西實在很難辦到。

再來就發現Nice Titles沒這個問題，於是就想說那把Nice Titles改到像FancyTooltips一樣的功能如何？開始動手時第一件發現的事就是Nice Titles parse datetime屬性完全是亂搞，出來都是invalid time(怎麼沒人發現?)。而FancyTooltips那份也沒有處理時區的部份，都當成localtime，所以會和wordpress預設都用+00:00差了好幾個小時。想要自己parse timezone，搞了半天就發現，datetime格式可長可短，要完整parse，要寫個不小的parser，於是就又把它丟著沒動一段時間。

事實上之前就有人寫了一個重覆顯示的work around(可以在他的站去看效果)，在fancytooltips.css中加入以下兩行：

div.fancytooltip > p {display:none;}
div.fancytooltip > p:first-child {display:block}

算是頭痛醫頭的辦法，就把多出來的藏起來。不過我不太喜歡，因為這樣只剩一行，比較不漂亮。而Firefox 1.5的pseudo element selector還沒辦法支援到nth-child這類複雜的運算，所以我選不到second child。後來就發現沒問題的Nice Titles，就跑去研究，然後鑽到死胡同裡面去停止。

但是前兩天和人討論CSS3規格的時候，想到nth-child，再次聯想到之前這個問題。於是終於想通，我不能選第二個，為什麼不能選最後一個？於是加上last-child之後，變成以下這樣：

div.fancytooltip > p {display:none;}
div.fancytooltip > p:first-child {display:block}
div.fancytooltip > p:last-child {display:block}

果然就沒問題了！在Firefox 1.5和IE6就沒問題了。(last-child是Firefox 1.5有支援到的CSS3 selector，所以可以用，IE則是上面三行都不吃，所以不會影響原來的行為。在一些CSS2 ready但是不支援last-child的browser，效果可能會類似只做前兩行。不過反正現在Firefox 1.5和IE6是大宗，其它就算了:p)

再來就是datetime的問題。仔細想想，wordpress的<ins> <del>標籤並不會幫你插入server timezone，而永遠都是+00:00的UTC時間。那麼只供wordpress使用的話就不需要parse timezone，直接build UTC date就好了。
將oDate = new Date(nYear, nMonth, nDay, nHours, nMinutes, nSeconds);
改成oDate = new Date(Date.UTC(nYear, nMonth, nDay, nHours, nMinutes, nSeconds));即可。

廢話很長，總之就這樣把FancyTooltips兩個傷腦筋的問題給解決了。有需要的人可以自行修改，或嫌麻煩，下載內含修改的檔案蓋過原來的plug-in。