細かい設定も可能な吹き出し（ツールチップ）JavaScript「mouseinfobox plugin for jQuery」

テキストや画像にマウスを乗せた時に説明が吹き出しのように表示されるツールチップは補足説明などに役立ちます。
それを簡単にかつ細かい設定も可能にしたMouseinfobox plugin for jQueryを消化します。

使用方法

Mouseinfobox plugin for jQueryからファイルをダウンロード。


<link rel="stylesheet" href="jquery.mouseinfobox.css" media="all" /> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.mouseinfobox.js"></script>
<script>
$(function(){
	$('.class名').infoBox({
		animation: ['opacity', 'bottom'], //アニメーション 透過と位置
		animDuration 200, //アニメーション速度
		offsetX: 20, //x位置
		offsetY: -20, //y位置
		bottomPos: true, //bottomから表示するか
		rightPos: false //rightから表示するか
	});
});
</script>

あとはclass名に表示させたい内容をtitleに記述すれば完成です。
<div class="class名" title="ツールチップテキスト">テキスト</div>

サンプル

マウスを乗せて

Javascriptサンプルページ一覧

skuare.net