割と需要ありそうなので備忘録ついでにご紹介。ツールチップで実装する、テキストのフォームヘルパーです。「こういう具合に入力してね」みたいなのを明示するやつ。
フォームのそれぞれの項目にヘルプを作るスクリプトです。マウスホバーやフォーカスでツールチップを出す、というもの。プラグインで実装するほどのものでも無いかもですけど、これはこれで楽そう。
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です。