かわいいデザインのツールチップ(吹き出し)効果を与える「grumble.js」

ツールチップ(吹き出し)により、文章や画像の補足をすることで、わかりやすくすることがあります。
よくあるプラグインだとちょっとデザインが・・・という方にgrumble.jsをお勧めします。
ポップでかわいいデザインで作成することができます。

sponsors

使用方法

grumble.jsからファイル一式をダウンロード。

<link type="text/css" href="grumble.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="Bubble.js"></script>
<script type="text/javascript" src="jquery.grumble.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#id名').mouseover(function(){ //idにマウスオーバーしたら
		$(this).grumble({
			text: '表示テキスト', 
			angle: 85,  //確度
			distance: 60,  //距離
			showAfter: 500, //表示のタイミング
			type: 'alt-', //水色にする場合
			hasHideButton: true, //クリックで消去の場合
			hideAfter: 200 //自動で消す(なしの場合はfalse)
		});
	});
});
</script>
あとは対応させたい要素にidを振れば完成です。

<div id="id名">テキスト</div>

サンプル

クリックで消えるオレンジver
自動で消える水色ver

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

sponsors