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

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

使用方法 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>
かわいいデザインのツールチップ(吹き出し)効果を与える「grumble.js」サンプル

sponsors

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

記事作成:
記事URL:

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