お手軽にtooltipsを実現するjavascript「GoodLookingTooltips」

ユーザビリティ向上のためリンク先を説明するような、いわゆるツールチップが求められることがあります。
Robert's talkで公開しているGood Looking Tooltipsはjavascriptライブラリを使用しないscript一つのお手軽なtooltipです。

使用方法
Good Looking Tooltipsのglt.jsとrounded-top.gif、rounded-bottom.gifをダウンロードします。
glt.jsの9、10行目にあるイメージパスを上記2つの画像のパスに合わせます。
head内に以下のscriptとCSSを加え、リンクにtitle属性を付与すれば完成です。
<script src="http://yourdomain/glt.js" type="text/javascript"></script>
<style>
.glt-elm{
position: absolute;
left: 0;
top: 0;
width: 150px;
color: #fff;
opacity: 0.9;
visibility: hidden;
}
.glt-elm p{
background: #666;
margin: 0;
padding-left: 0.5em;
}
.glt-elm img{
display: block;
}
.glt-elm{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
</style>
なお、サイト内で使用しているのはリンクなどに吹き出し説明を加えるtooltip「FancyTooltips」です。
お手軽にtooltipsを実現するjavascript「GoodLookingTooltips」サンプル

2007年08月19日

前の記事：テキストに影をつけるjavascript「text drop shodow」
次の記事：ページ内リンク先に滑らかにスクロールするjavascript「SmoothScroll」

関連記事

• amazonライクにぐるぐる回るJavaScript「3D Image Carousel」
• [mootools]MooTips
• [jQuery]clueTip
• [jQuery]jTip
• [jQuery]levTip

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」