前回の【連載】ユーザビリティ ～入力アシスト用のバルーン表示～で使ったtooltipライブラリは、実装が簡単なものの、問題が２つあった。
①噴出し部分が画像
②角丸部分の余白がIEでは透過されない(FireFoxは透過される)

そこで、自前で考えてみようとJavaScriptのグラフィックライブラリを調査している。

よくお世話になっているPHPSPOT開発日誌で紹介されていたwz_jsgraphicsが有力です。

試しに突貫で、バルーン表示するサンプルを作ってみました。
→ http://typista.dip.jp/test/wz_jsgraphics/

ところが、個人的にはかなりプライオリティの低いDOCTYPE宣言をまじめに書くと、表示が崩れ、見れたものではない。
→ http://typista.dip.jp/test/wz_jsgraphics/ng.html

◆DOCTYPE宣言の違いによるOK/NG
＜OK＞
　<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
　<html>

＜NG＞
　<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
　<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja”>

ほかのtooltip（バルーン表示）ライブラリを「クロスブラウザ」などのキーワードで検索したところ、CoolTipsという見た目シンプルでDOCTYPE宣言も(XHTML1.0で)問題ないライブラリを見つけたが、prototype.jsやscriptaculous.jsが必要だったり、実装もすぐ諦めた。
なので、いっそのこと自分への課題として、wz_jsgraphicsを使ったバルーン表示ライブラリをXHTML1.0対応させてみようかと。（時間は相当かかると思いますが）

◆参考URL
DOCTYPE 宣言による「解釈モード」の切り替え
各HTMLバージョンのDOCTYPE宣言のサンプル集

さて、すっかり更新が滞ってしまいました。
自分の領域を広げようとする人間が皆無の今の会社では、どうしても自分で仕事をかかえすぎてしまう。かつてはそれが自分の肥しになると思ってきたが、最近は時間を浪費しているようでならない。