割と需要ありそうなので備忘録ついでにご紹介。ツールチップで実装する、テキストのフォームヘルパーです。「こういう具合に入力してね」みたいなのを明示するやつ。

フォームのそれぞれの項目にヘルプを作るスクリプトです。マウスホバーやフォーカスでツールチップを出す、というもの。プラグインで実装するほどのものでも無いかもですけど、これはこれで楽そう。

jQuery FormHelp

動作サンプルです。HTMLを普通にマークアップするだけで自由にツールチップ内に実装できるのは楽ですね。

コード

本体とプラグインを読み込みます。

 $.formHelp();

コールします。

<input id="input-email" type="email"/>
        <span class="helptext" data-for="#input-email">
                   <p>ここにツールチップ</p>
                        <hr>
                               HTMLが自由に使えます
                                <ul>
                                    <li>One</li>
                                    <li>Two</li>
                                    <li>Three</li>
                                </ul>
                        <hr>
         </span>

マークアップ。ツールチップはフォームに振ったidを、カスタムデータ属性で指定すればいいだけです。後は自由にマークアップ。

スクリプトも軽量なので使い勝手は良いかなと思います。ライセンスはMITです。

jQuery FormHelp on Github