フォーム入力時に吹き出しを出力させる
吹き出しを出力してくれるプラグイン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'