フォームにツールチップでヘルプを表示できるjQueryプラグイン

  • 公開日:2013/10/31
  • 最終更新日:2013/10/30
この記事は最終更新日から5年以上が経過しています。

フォームでユーザーにヘルプを表示する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本体とプラグインを読み込んでおきましょう。