とても軽量なツールチップ表示スクリプト

ちょっとした情報を付加してあげるのに便利な、ツールチップ。
「title属性があるじゃないか!」と思うのですが、表示は少なからずブラウザ解釈に依存しているようです。
※Alt属性は代替テキスト用なので、そもそもの用途が違います。

ちょっと必要になったので調べてみました。
が、下記にリスト化されるぐらいあるんで・・・さてどれにするか・・

List of 25 Javascript/Ajax & CSS Tooltip Scripts


まずは上記リストの中から。
####################################################
qTip
http://qrayg.com/learn/code/qtip

qTip - CSS Tooltips
こんな感じで、CSS らしくスパッ!っと表示されます。
スクリプトサイズも2KBということで軽量、記述法も「aタグのtitle属性」に内容を書く形で、とても良いです。

####################################################
Pure CSS Tooltips
http://psacake.com/web/jl.asp

Pure CSS Tooltips
qTipに似ていますが、リンク文字の後にタグでツールチップ内容を記述する形の記述法で、なんか慣れない気がします・・。
こちらもCSSメインですが、JSも併用してますね。

次は、リスト外から見つけた最後の本命です!
####################################################
Fading JavaScript Tooltips 2kb
http://www.leigeber.com/2008/06/javascript-tooltip/

こちらもqTipと同じくスクリプトサイズ2KB!なのに、上記の噴出しがフェードインフェードアウトしてくれちゃいます!

Fading JavaScript Tooltips 2kb

このようなものは「prototype.js」+「script.aculo.us」で実現するのが今風ですが、この2KBのスクリプトでも表現力は全く劣りません。
これは良い♪
記述法は「onmouseover & onmouseout」で記述する必要があり、ちょっと今風?ではないですが、とても魅力的なスクリプトです。

特に、「スクリプトが軽い」→「スクリプト量が少ない」→「わかりやすい」→「カスタマイズしやすい」となる訳で、2KBのフェードツールチップのこれが大本命。

phpspot開発日誌でも簡単に紹介されています。
アニメーションする2KBの軽量ツールチップJS:phpspot開発日誌

コメントを残す