トップページにTooltip (jQueryを使ったオリジナル)
トップページにTooltip機能を付けた。Tooltipのスクリプトはいろいろと流通しているが、この数年の間に大きく様変わりしたJavascriptを久しぶりに使ってみようというわけで自分でTooltipを作成した。
[1] 2種類のTooltip、(1) フォーカスが当たったときだけ表示されフォーカスが外れたら消えるもの (2) 閉じるボタン付きで、フォーカスが当たったら表示されるが、消すのは閉じるボタンによるもの
[2] Tooltipに表示する内容は本体ページの中に記述できるようにする。しかもTooltipターゲットの近くに記述する。
[3] JavascriptのライブラリとしてjQuery1.2.6を使う。jQueryの日本語資料としてこちらを参照した。
[4] jQueryによるTooltip Coda Bubble のソースを参考も参考にした。
[注]
(1) プログラミングインターフェースはprototypeによるTooltip protip2 に似ています。
(2) 動作確認は今のところIE7だけ
[機能拡張案]
(1) マウスカーソルがターゲットを横切っただけでTooltipが表示されてしまうのはうっとうしいので、一定時間ターゲット内にマウスカーソルが留まったときに表示する。
(2) IMGタグと組み合わせて画像の拡大表示。