フォームにツールチップでヘルプを表示できるjQueryプラグイン
- 公開日:2013/10/31
この記事は最終更新日から12年以上が経過しています。
フォームでユーザーにヘルプを表示する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本体とプラグインを読み込んでおきましょう。
フォルダ