ここにマウスをのせてみな

ここにものせてみな

アニメーションとか色々設定できるらしいから、クリックしてみなよ

こんなのもあんの?

もはや別次元

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

  • files
  • js
  • html
<link href="<PATH>/tooltipster.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.tooltipster.min.js"></script>
<script>
	$(window).load(function(){
		$('.tooltip').tooltipster();
		$('.tooltip2').tooltipster({
			content: $('<img src="<PATH>/img15.jpg" />')
		});
		$('.tooltip3').tooltipster({
			animation: 'swing',
			delay: 200,
   			theme: 'tooltipster-default',
   			touchDevices: false,
   			trigger: 'click'
		});
		$('.tooltip4').tooltipster({
			animation: 'slide'
		});
		$('.tooltip5').tooltipster({
			animation: 'fall'
		});
	});
</script>
<p><span class="ketchup tooltip" title="簡単に吹き出し表示">ここにマウスをのせてみな</span></p>

<p><span class="tooltip2">ここにものせてみな</span></p>

<p><span class="tooltip3" title="どんなアクションで吹き出しを表示するかとかも設定できたらいいよなぁ">アニメーションとか色々設定できるらしいから、クリックしてみなよ</span></p>

<p><span class="tooltip4" title="横からとか!">こんなのもあんの?</span></p>

<p><span class="tooltip5" title="上から!?">もはや別次元</span></p>

Tooltipsterについて

Tooltipsterは、非常に豊富な機能をもった吹き出しプラグインです。
設置はとても簡単ですが、オプションがとても豊富に用意されているので、自分好みに細かくカスタマイズ可能です。
こりゃすげーや
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Tipper

    Tipper

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

  • tipsy

    tipsy

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

  • vtooltip

    vtooltip

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

  • tinyTips

    tinyTips

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

  • Mouseinfobox

    Mouseinfobox

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