感覚的にはEXCELのコメント表示の様な事をHTMLでも実装出来ないか調べていたら、ツールチップ（吹き出し）を表示する機能がjQueryのプラグインにありましたので使用方法をご紹介します。
※ツールチップ（tooltip）とはユーザがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな吹き出しが出現し、その枠内には選択された項目に関する補足情報を表示させる機能の事です。
導入手順
-
- プラグイン「jQuery PowerTip」のダウンロード
- 必要となるファイル
- jquery.powertip.min.js
- jquery.powertip.css
- ダウンロードしたファイルの読み込み設定
|
1 2 |
<script src="./js/jquery-1.9.1.min.js"></script> <script src="./js/jquery.powertip.min.js"></script> |
|
1 |
<link rel="stylesheet" type="text/css" href="./jquery.powertip.css" /> |
-
- HTMLのtitle属性へツールチップで表示させるテキストを記述します。
|
1 2 3 4 5 6 7 8 |
<input id="powerTip_btn1" title="上コメント" type="button" name="powerTip_btn1" value="上表示"> <input id="powerTip_btn2" title="右コメント" type="button" name="powerTip_btn2" value="右表示"> <input id="powerTip_btn3" title="下コメント" type="button" name="powerTip_btn3" value="下表示"> <input id="powerTip_btn4" title="左コメント" type="button" name="powerTip_btn4" value="左表示"> <input id="powerTip_btn5" title="右上コメント" type="button" name="powerTip_btn5" value="右上表示"> <input id="powerTip_btn6" title="右下コメント" type="button" name="powerTip_btn6" value="右下表示"> <input id="powerTip_btn7" title="左上コメント" type="button" name="powerTip_btn7" value="左上表示"> <input id="powerTip_btn8" title="左下コメント" type="button" name="powerTip_btn8" value="左下表示"> |
-
- JavaScriptへ記述します。オプションを設定するとツールチップを表示する位置などを調整する事が出来ます。
|
1 2 3 4 5 6 7 8 9 10 11 |
jQuery(function($) { /* ツールチップ表示用のスクリプト実行 */ jQuery("#powerTip_btn1").powerTip({placement: "n"}); jQuery("#powerTip_btn2").powerTip({placement: "e"}); jQuery("#powerTip_btn3").powerTip({placement: "s"}); jQuery("#powerTip_btn4").powerTip({placement: "w"}); jQuery("#powerTip_btn5").powerTip({placement: "ne"}); jQuery("#powerTip_btn6").powerTip({placement: "se"}); jQuery("#powerTip_btn7").powerTip({placement: "nw"}); jQuery("#powerTip_btn8").powerTip({placement: "sw"}); }); |
-
- サンプル