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

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

使用方法
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>

なお、サイト内で使用しているのはリンクなどに吹き出し説明を加えるtooltip「FancyTooltips」です。
お手軽にtooltipsを実現するjavascript「GoodLookingTooltips」サンプル

sponsors

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

記事作成:
記事URL:

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