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

細かい設定も可能な吹き出し(ツールチップ)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>

sponsors

「細かい設定も可能な吹き出し(ツールチップ)JavaScript「mouseinfobox plugin for jQuery」」をシェアする

記事作成:
記事URL:

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