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

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

sponsors

使用方法

Good Looking Tooltipsglt.jsrounded-top.gifrounded-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>

sponsors

Javascriptサンプルページ一覧
skuare.net