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

  • files
  • js
  • html
<link href="<PATH>/tipsy.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.tipsy.js"></script>
<script>
	$(window).load(function(){
		$('#example-1').tipsy();
		$('#north').tipsy({gravity: 'n'});
		$('#south').tipsy({gravity: 's'});
		$('#east').tipsy({gravity: 'e'});
		$('#west').tipsy({gravity: 'w'});
		$('#north-west').tipsy({gravity: 'nw'});
		$('#north-east').tipsy({gravity: 'ne'});
		$('#south-west').tipsy({gravity: 'sw'});
		$('#south-east').tipsy({gravity: 'se'});
	});
</script>



//オプション一覧
delayIn: 0,      // delay before showing tooltip (ms)
delayOut: 0,     // delay before hiding tooltip (ms)
fade: false,     // fade tooltips in/out?
fallback: '',    // fallback text to use when no tooltip text
gravity: 'n',    // gravity
html: false,     // is tooltip content HTML?
live: false,     // use live event support?
offset: 0,       // pixel offset of tooltip from element
opacity: 0.8,    // opacity of tooltip
title: 'title',  // attribute/callback containing tooltip text
trigger: 'hover' // how tooltip is triggered - hover | focus | manual
<p><a id="example-1" href="#" original-title="こんにちわ">ここにマウスをのっけてみよう</a></p>
<p class="p01">
	<a href="#" id="north-west" original-title="これは右下にでます">吹き出し</a> <a href="#" id="north" original-title="これは下にでます">が</a> <a href="#" id="north-east" original-title="これは左下にでます">でる</a> <a href="#" id="west" original-title="これは右にでます">位置を</a> <a href="#" id="east" original-title="これは左にでます">オプションで</a> <a href="#" id="south-west" original-title="これは右上にでます">指定</a> <a href="#" id="south" original-title="これは上にでます">できる</a> <a href="#" id="south-east" original-title="これは左上にでます">んだとさ</a>
</p>

tipsyについて

tipsyは、シンプルな見た目と多様なオプションを備えた吹き出し表示プラグインです。
吹き出し自体はとてもシンプルなのですが、様々なオプションや、コールバック関数も備えているので、 使い道はたくさんありそうです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Tooltipster

    Tooltipster

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

  • tinyTips

    tinyTips

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

  • Mouseinfobox

    Mouseinfobox

    簡単に吹き出しを表示することができる

  • vtooltip

    vtooltip

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

  • Tipper

    Tipper

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