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

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開発日誌

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です