Warning: Undefined array key "HTTP_USER_AGENT" in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/other/tiny-fixed.php on line 75
割と需要ありそうなので備忘録ついでにご紹介。ツールチップで実装する、テキストのフォームヘルパーです。「こういう具合に入力してね」みたいなのを明示するやつ。
フォームのそれぞれの項目にヘルプを作るスクリプトです。マウスホバーやフォーカスでツールチップを出す、というもの。プラグインで実装するほどのものでも無いかもですけど、これはこれで楽そう。
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です。