グレーの枠にマウスを載せて下さい

好きな方向に

LEFT SIDE

UPPER SIDE

RIGHT SIDE

BOTTOM

遅ればせながら表示

LEFT SIDE

UPPER SIDE

RIGHT SIDE

BOTTOM

ついてくるぞー

LEFT SIDE

UPPER SIDE

RIGHT SIDE

BOTTOM

縦位置、横位置にあわせて表示

LEFT SIDE

UPPER SIDE

RIGHT SIDE

BOTTOM

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

  • files
  • js
  • html
<link href="<PATH>/jquery.fs.tipper.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.fs.tipper.min.js"></script>
<script>
    $(window).load(function(){
		$('.Tipper-demo').tipper();
		//各要素のdata属性にオプションを設定しています
    });
</script>
<p class="first">グレーの枠にマウスを載せて下さい</p>

<p class="title">好きな方向に</p>
<div class="Tipper-box">
	<p class="Tipper-demo01 Tipper-demo" data-title="ここに" data-tipper-options='{"direction":"left"}'>LEFT SIDE</p>
	<p class="Tipper-demo01 Tipper-demo" data-title="文字" data-tipper-options='{"direction":"top"}'>UPPER SIDE</p>
	<p class="Tipper-demo01 Tipper-demo" data-title="を" data-tipper-options='{"direction":"right"}'>RIGHT SIDE</p>
	<p class="Tipper-demo01 Tipper-demo" data-title="入れられる" data-tipper-options='{"direction":"bottom"}'>BOTTOM</p>
</div>

<p class="title">遅ればせながら表示</p>
<div class="Tipper-box">
	<p class="Tipper-demo02 Tipper-demo" data-title="ここに" data-tipper-options='{"direction":"left","delay":"100"}'>LEFT SIDE</p>
	<p class="Tipper-demo02 Tipper-demo" data-title="文字" data-tipper-options='{"direction":"top","delay":"200"}'>UPPER SIDE</p>
	<p class="Tipper-demo02 Tipper-demo" data-title="を" data-tipper-options='{"direction":"right","delay":"300"}'>RIGHT SIDE</p>
	<p class="Tipper-demo02 Tipper-demo" data-title="入れられる" data-tipper-options='{"direction":"bottom","delay":"400"}'>BOTTOM</p>
</div>

<p class="title">ついてくるぞー</p>
<div class="Tipper-box">
	<p class="Tipper-demo03 Tipper-demo" data-title="ここに" data-tipper-options='{"direction":"left","follow":"true"}'>LEFT SIDE</p>
	<p class="Tipper-demo03 Tipper-demo" data-title="文字" data-tipper-options='{"direction":"top","follow":"true"}'>UPPER SIDE</p>
	<p class="Tipper-demo03 Tipper-demo" data-title="を" data-tipper-options='{"direction":"right","follow":"true"}'>RIGHT SIDE</p>
	<p class="Tipper-demo03 Tipper-demo" data-title="入れられる" data-tipper-options='{"direction":"bottom","follow":"true"}'>BOTTOM</p>
</div>

<p class="title">縦位置、横位置にあわせて表示</p>
<div class="Tipper-box">
	<p class="Tipper-demo04 Tipper-demo" data-title="マウスオンした時の縦位置に表示" data-tipper-options='{"direction":"left","match":"true"}'>LEFT SIDE</p>
	<p class="Tipper-demo04 Tipper-demo" data-title="マウスオンした時の横位置に表示" data-tipper-options='{"direction":"top","match":"true"}'>UPPER SIDE</p>
	<p class="Tipper-demo04 Tipper-demo" data-title="マウスオンした時の縦位置に表示" data-tipper-options='{"direction":"right","match":"true"}'>RIGHT SIDE</p>
	<p class="Tipper-demo04 Tipper-demo" data-title="マウスオンした時の横位置に表示" data-tipper-options='{"direction":"bottom","match":"true"}'>BOTTOM</p>
</div>

Tipperについて

Tipperはマウスオーバーで表示する吹き出しを簡単に設置できるプラグインです。
オプションで、表示のさせ方を色々とカスタマイズできます。
吹き出し部分の背景色をrgbaで指定しているためIE8-だと色が出ないので、その指定の前に16進数でのカラー指定をすれば IE6まで対応になります。
このページのデモはcssをカスタムしているのでIE6でも表示されますが、本体のcssにデフォルトでは16進数カラー指定はないので IE9からしか色がでいません。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Mouseinfobox

    Mouseinfobox

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

  • vtooltip

    vtooltip

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

  • tinyTips

    tinyTips

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

  • tipsy

    tipsy

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

  • Tooltipster

    Tooltipster

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