テスト - フォームの入力説明をtooltipで表示する

動作サンプル


お名前（姓・名）を入力してください。
例）山田太郎

メールアドレスを入力してください。
＊携帯電話のメールアドレスは使用できません。
例）sample@sample.com

お住まいの都道府県を選択してください。

海外にお住まいの方は「その他」を選択してください。

お電話番号を市外局番から入力してください。

＊半角数字でご入力ください。
例）00-0000-0000

- -

性別を選択してください。

  

お問い合わせ内容を入力してください。
＊3000字以内でご入力ください。
＊半角カタカナは使用できません。

弊社からの返信が不要の場合は選択してください。

＊選択していただいた場合は、弊社から返信をおこなうことはありません。
＊登録していただいたご意見・ご感想は、今後の運営の参考とさせていただきます。

個人情報保護方針の内容を確認し、同意される場合は選択してください。

＊同意していただかない場合は、お問い合わせのご登録はできません。

  

使い方

jsとcssを外部ファイルとして読み込む

<script type="text/javascript" src="js/inputExplainExtension.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/inputExplainExtension.css" />

入力説明を記述したp要素のクラス属性に"explainExtension"を指定し、
tooltipを表示する対象のinput要素に付加したid属性を"["と"]"で囲んで指定する。（class="explainExtension[id]"）

<p class="explainExtension[name]">お名前（姓・名）を入力してください。<br />例）山田太郎</p>
<input type="text" name="name" id="name" class="pwdExt" size="50" value="" />

対象のinput要素を複数指定する場合は、カンマ区切りでid属性を指定する。（class="explainExtension[id1,id2,id3]"）

<p class="explainExtension[tel1,tel2,tel3]">お電話番号を市外局番から入力してください。<br />＊半角数字でご入力ください。</p>
<input type="text" name="tel1" id="tel1" value="" /> - <input type="text" name="tel2" id="tel2" value="" /> - <input type="text" name="tel3" id="tel3" value="" />

javascriptの設定

jsファイル内の12～20行目付近にある設定値を編集することで、tooltipの色や表示動作をサイトに合わせることができる。
また、cssも外部ファイルとして外出ししているので、cssを編集することでtooltipのデザインを大きく変更することもできる。

//-----------------------------------------
// 設定値
//-----------------------------------------
conf : {
	targetClass : 'explainExtension', // 対象とするクラス
	tooltipColor : 'black', // tooltipの色 --> 'black','white','red','green'
	hideSpeed : 5000 // tooltipを自動非表示するまでの時間（ミリ秒） --> 自動で非表示にしない場合は0をセット
},