skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

お手軽に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」