吹き出し方式のツールチップテキスト作成Bubble Tooltips

Check このエントリーをはてなブックマークに追加

配布元:wg:Bubble Tooltips
ライセンス:特に明記なし

Bubble Tooltipsはa要素にマウスが乗った場合に説明を表示することができるjsライブラリです。

設置方法

BubbleTooltips.jsを読み込み、enableTooltipsをonloadイベントに追加します。

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
try{
	window.addEventListener('load',enableTooltips,false);
}catch(e){
	window.attachEvent('onload',enableTooltips);
}
</script>

ツールチップを表示するa要素にはtitle属性で表示するテキストを入力します。

<a href="http://pro.html.it/" title="Pro, the italian webdev portal I write for">Pro</a>

サンプル

enableTooltipsを実行する際にidを指定することにより、特定id内のリンクのみでツールチップを表示します。

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
try{
	window.addEventListener('load',function(){
		enableTooltips("content")
	},false);
}catch(e){
	window.attachEvent('onload',function(){
		enableTooltips("content")
	});
}
</script>

サンプル

スポンサードリンク

コメント

カテゴリー:ツールチップ ライブラリ 表示