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

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

フォームでユーザーにヘルプを表示するjQueryプラグインです。
ヘルプを表示する方法はいろいろありますが、今回はテキストフィールドへのフォーカスでヘルプが表示される方法です。

jQuery FormHelp

動作サンプルです。
ツールチップ内にはHTMLも記述できます。
プラグインは以下から取得できます。ライセンスはMITです。
A jQuery plugin providing contextual help in a form

Code

<form id=&quot;sampleform&quot;>
    <table>
        <tr>
            <td><label>Input text</label></td>
            <td>
                <input type=&quot;text&quot; id=&quot;your-name&quot;>
                <span class=&quot;helptext&quot; data-for=&quot;#your-name&quot;>
                    ここにヘルプを書きます。<br>
                    HTMLも書くことができます。<br>
                    例えばリストとか
                    <ul>
                        <li>hoge</li>
                        <li>hoge</li>
                    </ul>
                </span>
            </td>
        </tr>
</form>

フォームに割り当てたidをツールチップのカスタムデータ属性で指定します。
ツールチップの見た目はcssでお好きなように。

jQuery本体とプラグインを読み込んでおきましょう。