【フォーム】フォームに吹き出しをつける

フォーム入力時に吹き出しを出力させる

吹き出しを出力してくれるプラグインPowerTipを使えばよい

使い方

ソースを任意のところに配備

下記をhtmlに埋め込む(jqueryのバージョンは各自合わせる)
ダウンロードはこちら

htmlに記述

ソースパスは各自で合わせる

sample.html

<link rel="stylesheet" href="jquery.powertip.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery.powertip.js"></script>

使う

呼び出し方は下記

sample.js

$('#noteForXX').powerTip({
    placement: 'n', //北(north,上側)を指定中
});

五月雨にポイントを

• このままだととりあえず上に、マウスオーバーのタイミングで吹き出しがでる

オプション	方角	位置
n	北	上
e	東	右
s	南	下
w	西	左
nw	北西	ひだりうえ
ne	北東	みぎうえ
sw	南西	ひだりした
se	南東	みぎした
nw-alt	北西	吹き出しは上に、矢印はひだりうえ(ここはやってみてください)
ne-alt	北東	吹き出しは上、矢印はみぎうえ(ここはやってみてください)
sw-alt	南西	吹き出しは下、矢印はひだりした(ここはやってみてください)
se-alt	南東	吹き出しは下、矢印はみぎした(ここはやってみてください)

• クリックでだしたいなら

sample.js

// run PowerTip - but disable the default event hooks
$('.tooltips').powerTip({ manual: true });

// hook custom onclick function
$('.tooltips').on('click', function() {
    // toggle the tooltip for the element that received the click event
    $.powerTip.toggle(this);
});

↑けどクリックしてから消えない(他のツールチップが表示されるまで)

sample.js

$('.tooltips').powerTip({ openEvents: [ 'click' ], closeEvents: [ 'click' ] });

↑これでクリックしてもう一度クリックするとでてきえてする
さらにオプションを変更すれば左下ふきだし

sample.js

openEvents: [ 'click' ],
closeEvents: [ 'click' ],
placement: 'sw-alt'