TOP  >  WebDesign  >  JavaScript, Ajax、CSSで実現するツールチップ集「30+ Tooltips Scripts」
2008年10月28日

JavaScript, Ajax、CSSで実現するツールチップ集「30+ Tooltips Scripts」

カーソルを合わせるとぴょんと飛び出すツールチップ。以前「javascript不要のCSSで制御するツールチップ「Easy CSS Tooltip」」や「半透明・角丸のツールチップを表示するJavaScript 「CoolTips」」といくつかDesigndevelopでも紹介してきましたが、今日紹介するのはそんなツールチップのスクリプトを集めたエントリー「30+ Tooltips Scripts」です。


Tooltip.js

主にJavaScript, Ajax、CSSを使って実現しています。沢山のToolTipsが紹介されていますが、今日はその中から気になったToolTipsが公開されていますので下記に貼り付けておきます。

詳しくは以下

■SuperNote

download | Preview | Source

CSS/JavaScriptによって作られたポップアップツールチップ。なめらかにフェードします。
 
 
 
 
■Prototip2

download | Preview | Source

Prototypeで実現する様々な効果、デザインを持たせることができるツールチップです。かなり高機能なツールチップです。
 
 
 
 
■MooTools Tooltip

download | Preview | Source

MooToolsで実現する半透明のツールチップ。クラス指定することで、デザインの変更も可能です。
 
 
 
 
■jQuery Input HintBox

download | Preview | Source

jQueryを使ったヒントツールチップ選択したテキストボックスに合わせてヒントを表示させることができます。
 
 
上記の他にも沢山のツールチップが紹介されています。仕組みもデザインも様々なので、ページの用途やデザインに合わせて使っていきたいですね。

30+ Tooltips Scripts With JavaScript, Ajax & CSS

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 09:49  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る