フォームにツールチップでヘルプを表示できるjQueryプラグイン
- 公開日:2013/10/31
この記事は最終更新日から10年以上が経過しています。
フォームでユーザーにヘルプを表示するjQueryプラグインです。
ヘルプを表示する方法はいろいろありますが、今回はテキストフィールドへのフォーカスでヘルプが表示される方法です。
jQuery FormHelp
動作サンプルです。
ツールチップ内にはHTMLも記述できます。
プラグインは以下から取得できます。ライセンスはMITです。
A jQuery plugin providing contextual help in a form
Code
<form id="sampleform"> <table> <tr> <td><label>Input text</label></td> <td> <input type="text" id="your-name"> <span class="helptext" data-for="#your-name"> ここにヘルプを書きます。<br> HTMLも書くことができます。<br> 例えばリストとか <ul> <li>hoge</li> <li>hoge</li> </ul> </span> </td> </tr> </form>
フォームに割り当てたidをツールチップのカスタムデータ属性で指定します。
ツールチップの見た目はcssでお好きなように。
jQuery本体とプラグインを読み込んでおきましょう。