[JavaScript] 入力項目の説明を tooltip で表示する

フォームで入力項目に対する説明を記述することは一般的になっているが、（ユーザビリティを考慮するならばそうしなければいけない）その説明をtooltipで表示するライブラリを作成した。

フォームからの登録数を増やすには、ファーストビューでなるべくユーザに入力項目が少なくすっきりとしている印象を与えることが少なからず重要となる。しかし、だからと言って入力項目の説明や記述例を記載しないことは、ユーザビリティの著しい低下をもたらす。そういった場合に簡単に導入できるtooltipがあれば良いと思って作成した。

使い方

ZIPファイルを解凍後、任意のディレクトリに配置し、本機能を実装したいhtmlで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をセット
},

フォームのユーザビリティについては、「[(X)HTML] フォームのユーザビリティ・アクセシビリティについて1」を参照

[JavaScript] 入力項目の説明を tooltip で表示する

使い方

javascriptの設定

追記

トラックバックURL

コメント投稿フォーム

Site Search