ノーマル

表示テキスト指定

アニメーション

位置固定

Ajax

入力した文字を表示

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.mouseinfobox.js"></script>
<script>
	$(window).load(function(){
		$('#demo01').infoBox();
		$('#demo02').infoBox({
			content: "オプションで指定",
			animation: ['opacity']
		});
		$('#demo03').infoBox({
			content: "opacity bottom animation",
			animation: ['opacity', 'bottom']
		});
		$('#demo04').infoBox({
			animation: ['opacity', 'bottom'],
			useMouse: false,
			offsetX: 220,
			offsetY: 0
		});
		$('#demo05').infoBox({
			animation: ['opacity', 'bottom'],
			ajaxURL: '[jplugin]/balloon/Mouseinfobox/ajax.php',
			ajaxReload: true
		});
		$('#demo06').infoBox({
			animation: ['opacity', 'bottom'],
			ajaxURL: '[jplugin]/balloon/Mouseinfobox/ajax.php',
			ajaxReload: true,
			ajaxData: {'name': $('#name').val()}
		});
		$('#name').keyup(function() {
			$('#demo06').data('InfoBox').setAjaxData({
				'name': $('#name').val()
			})
		});
	});
</script>


//オプション一覧
'offsetX'     : 20,
'offsetY'     : 20,
'useMouse'    : true,
'content'     : '',
'boxClass'    : '',
'animation'   : [],
'animDuration': 200,
'ajaxURL'     : '',
'ajaxType'    : 'POST',
'ajaxData'    : '',
'ajaxReload'  : false,
'ajaxLoadContent'  : 'Loading ...',
'bottomPos': false,
'rightPos': false
<p id="demo01" title="ノーマル">ノーマル</p>
<p id="demo02">表示テキスト指定</p>
<p id="demo03">アニメーション</p>
<p id="demo04" title="位置固定">位置固定</p>
<p id="demo05">Ajax</p>
<p id="demo06">入力した文字を表示</p>

<div id="input"><input type="text" id="name" placeholder="ここに入力した文字を表示"></div>

Mouseinfoboxについて

Mouseinfoboxは、簡単に吹き出しを表示することができるプラグインです。
吹き出しの表示方法、位置なども設定で色々変更できるし、IE7~で動作するのでなかなか使い勝手がよろしいです。
jqueryの1.10.2を使っている場合、IE7,8だとanimation設定をした場合に動作しないようです。
原因がプラグイン内のanimate()のパラメータをシングルクォーテーションで括っていない事が原因のようです。
当サイトで読み込んでいる「jquery.mouseinfobox.js」はその部分を修正しているので、IE7,8でも動きますが、本家からDLしたファイルの場合は注意してください。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン

  • tipsy

    tipsy

    シンプルな見た目と多様なオプションを備えた吹き出し

  • tinyTips

    tinyTips

    簡単にカラフルな吹き出しを表示できる

  • Tipper

    Tipper

    マウスオーバーで表示する吹き出しを簡単に設置できる

  • Tooltipster

    Tooltipster

    非常に豊富な機能をもった吹き出しプラグイン

  • vtooltip

    vtooltip

    シンプルな吹き出しを表示できる