TOP  >  WebDesign  >  javascript不要のCSSで制御するツールチップ「Easy CSS Tooltip」
2008年04月21日

javascript不要のCSSで制御するツールチップ「Easy CSS Tooltip」

ユーザービリティの向上のための仕掛の一つツールチップ、最近の主流としてはjavascroptを使用しての実装という形が多く、色々な形でパッケージ化されています。ある程度パッケージングされているんで実装は簡単とは言え、なれていない人にとってはまだまだややこしい部分も多いです。

tooltipcss.gif

今回紹介する「Easy CSS Tooltip」はjavascriptを使用せずCSSとHTMLでツールチップを実現すると言うものです。

詳しくは以下

コードは以下の通り、至ってシンプルで少しHTMLとCSSがわかれば悩む必要は無いかと思います。

■CSS部分

a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

■HTML部分

Easy <a href="#" class="tooltip">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.

もちろんデザインはCSSで制御していますので、カスタマイズも容易にできるかと思います。エフェクト部分でjavascriptの方が表現の幅は広がりますが、本当にシンプルなツールチップで良いとか、悩まずスマートに導入したいという方は試してみても良いかと思います。

管理人も初めてjavascriptを使って機能を実装したときには何度も公式ページを見直して、「動かない…」と繰り替えていました。javascriptが今一取っつきにくくて、利用したいけどと思っている方は是非試してみてください。

なお対応しているブラウザは「IE5, IE 5.5, IE 6, IE7, Safari 3.1, Latest Firefox & Opera Version.」となっております。

Easy CSS Tooltip | Kollermedia.at

posted 11:23  |  
Category: WebDesign   
tag: CSS webdesign

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る