IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

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

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