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

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

sponsors

使用方法

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>
また、以下のようなオプションがあり、エフェクトや吹き出し位置を指定できます。
//下記サンプルエフェクト
	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)を合わせるという設定です。

サンプル

シンプル
エフェクト
フッキング

sponsors

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