高機能なツールチップjavascript「Prototip」

リンクなどに説明を付与するツールチップというものがあります。
今回紹介するPrototipは、エフェクトや出す場所を調整できる高機能なjavascriptです。
proPrototip

使用方法
Prototipからprototip.js、prototip.cssをprototypeからprototype.jsをダウンロードします。
*エフェクトを付ける場合はscript.aculo.usのeffect.jsが必要です。
<script src="http://yourdomain/prototype.js" type="text/javascript"></script>
<script src="http://yourdomain/effects.js" type="text/javascript"></script>
<script src="http://yourdomain/prototip.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://yourdomain/prototip.css">
<script type="text/javascript">
function init() {
new Tip('id名', 'コンテンツ', {title: 'タイトル'}); //コンテンツにはhtmlが使用できます
}
Event.observe(window, 'load', init, false);
</script>

上記のようにheadに記述したら、ツールチップを表示させたいリンクなどに上記で指定したidを付与すれば完成です。
<a href="#" id="id名">テキスト</a>
また、以下のようなオプションがあり、エフェクトや吹き出し位置を指定できます。
 ・className:darktip、pinktip
 ・effect:blind、appear
 ・hook:topLeft、topRight、bottomLeft、bottomRight(target、tip)
 ・offset:x:数字、y:数字
//サンプルエフェクト
new Tip('id名', 'コンテンツ', { title: 'タイトル', className: 'darktip', effect: 'blind'});
//サンプルフッキング
new Tip('id名', 'コンテンツ', {title: 'タイトル', className: 'pinktip', hook:{target: 'topRight', tip: 'bottomLeft'}, offset: {x:5,y:5} });

なお、hookはtargetはツールチップ元の、tipは吹き出しの位置を示します。
上記の例では、フッキングという文字(target:ツールチップ元)の右上(topRight)に、ツールチップ(tip:吹き出し)の左下(bottomLeft)を合わせるという設定です。
高機能なツールチップjavascript「Prototip」サンプル

sponsors

「高機能なツールチップjavascript「Prototip」」をシェアする

記事作成:
記事URL:

TOP > > > 高機能なツールチップjavascript「Prototip」