【jQuery】入力フォームでフォーカス時にツールチップを表示させる方法
この記事の概要
Web制作者
ツールチップで入力フォームをすっきりさせたいなぁ…。
ツールチップを実装する方法が知りたい。
管理人
jQueryを使った方法があります。この後詳しく紹介しますね。
本記事の内容
- jQueryを使った入力フォームにツールチップを実装する方法
Webサイト上でよく見かける入力フォームですが、中にはツールチップが実装されているものもあります。
ツールチップとは？
ツールチップはマウスカーソルを項目に合わせた時に、説明や注釈などが記述された吹き出しなどを表示させる手法です。
入力フォームなどで説明を入れたい時に、ツールチップを使うことで無駄のない簡潔なフォームを実現できます。
イメージ
入力項目にフォーカスが移った時にテキストが吹き出しになって浮き上がり、フォーカスが外れると吹き出しが消えます。
この記事ではjQueryで入力フォームにツールチップを実装する方法を詳しく説明します。
ツールチップの実装方法
まず、簡単な仕様を決めておきます。
仕様（設置項目）
- 名前
- ユーザー名
- メールアドレス
- 電話番号
- 備考・お問い合わせ
上記の項目を設置して、それぞれに異なる文言のツールチップを用意します。
HTML
<form class="input_item">
<dl>
<dt><span class="req">必須</span>名前</dt>
<dd>
<input type="text" id="name" name="name">
<span class="tooltip">名前はフルネームで入力してください。</span>
</dd>
</dl>
<dl>
<dt><span class="any">任意</span>ユーザー名</dt>
<dd>
<input type="text" id="username" name="username">
<span class="tooltip">すでに登録されているユーザー名は使用できません。</span>
</dd>
</dl>
<dl>
<dt><span class="req">必須</span>メールアドレス（半角英数字）</dt>
<dd>
<input type="text" id="mailaddress" name="mail_address">
<span class="tooltip">携帯電話のメールアドレスをご登録の場合は、ドメイン受信設定をお願いします。</span>
</dd>
</dl>
<dl>
<dt><span class="req">必須</span>電話番号</dt>
<dd>
<input type="tel" id="tel" name="tel">
<span class="tooltip">半角数字で入力してください。</span>
</dd>
</dl>
<dl>
<dt><span class="req">必須</span>備考・お問い合わせ</dt>
<dd>
<textarea name="remarks" id="remarks" rows="4" cols="50" maxlength="500"></textarea>
<span class="tooltip">できるだけ詳しいお問い合わせ内容を入力してください。</span>
</dd>
</dl>
</form>上の仕様にある入力フォームをinputタグやtextareaタグを使ってコーディングします。
各フォームにtooltipという共通のクラス名で表示したいテキストを用意します。
※これがツールチップとなる要素です。
CSS
.input_item dl {
margin: 0 0 10px 0;
}
.input_item dl dt {
line-height: 30px;
height: 30px;
margin: 0 0 10px 0;
}
.input_item dl dt span {
font-size: 14px;
margin: 0 10px 0 0;
display: inline;
line-height: 20px;
padding: 3px 10px;
color: #ffffff;
height: 18px;
border-radius: 4px;
}
.input_item dl dt .req {
background: #ff0000;
}
.input_item dl dt .any {
background: #cccccc;
}
.input_item dl dd {
width: 50%;
line-height:30px;
height:auto;
position: relative;
margin: 0;
}
.input_item dl dd input {
font-size: 18px;
width: 50%;
height:30px;
margin:0;
padding: 10px;
}
.input_item dl dd textarea {
width: 50%;
padding: 10px;
}
.tooltip {
position: absolute;
background: #f4eddd;
font-size: 14px;
width: 300px;
padding: 5px 10px;
left: 55%;
top: 0;
border-radius: 5px;
border: 1px solid #aaa;
box-shadow: 0px 1px 2px 0 #c1bcb9;
z-index: 10000;
line-height: 22px;
display: none;
}
.tooltip:before {
content: '';
position: absolute;
top: 9px;
left: -14px;
border-top: solid 7px transparent;
border-bottom: solid 7px transparent;
border-right: solid 13px #aaa;
}
.tooltip:after {
content: '';
position: absolute;
top: 9px;
left: -12px;
border-top: solid 7px transparent;
border-bottom: solid 7px transparent;
border-right: solid 13px #f4eddd;
}tooltipというクラス名の要素がツールチップとなります。before、after疑似要素を使って、三角形を作り、吹き出しを描画しています。
初期状態（入力フォームからフォーカスが外れている状態）ではtooltipクラスの要素はdisplay:none;で非表示にします。また、ここでは吹き出しの位置はposition:absolute;各入力フォームの右側に絶対位置で指定します。
jQuery
<head>内に記述
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>jQueryを<head>内に記述します。
ツールチップ動作実装
// 入力項目にフォーカスが移った時の処理
$('form dd').each(function(){
var form = $(this);
form.find('input, select, textarea').focus(function() {
form.find('.tooltip').fadeIn(300, function() {
});
});
});
// フォーカスが外れたときの処理
$('input, select, textarea').blur(
function(){
$('form').find('.tooltip').fadeOut(300, function() {
});
});ツールチップ表示は下記のように大きく2つの処理があります。
ツールチップ実装時の処理
- 入力項目にフォーカスが移った時の処理
- フォーカスが外れたときの処理
入力項目にフォーカスが移った時の処理
.each()メソッドで該当する要素に対して繰り返し処理を行います。
繰り返す処理としては、inputタグ、selectタグ、textareaタグのなかでフォーカスが移っているものを探します。
フォーカスが移っているinputタグ、selectタグ、textareaタグが見つかったら、.fadeIn()メソッドでtooltipクラスをフェードインさせます。
フォーカスが外れたときの処理
.blur()メソッドを使ってinputタグ、selectタグ、textareaタグのうちフォーカスが外れた時に.fadeOut()メソッドでtooltipkクラスをフェードアウトさせます。
まとめ
使用するメソッドもそこまで多くないので、比較的シンプルで分かりやすいjQueryでツールチップは実装できます。
再度ツールチップの実装ポイントをまとめます。
ポイント
- 入力フォームをHTMLを使って設置する
- CSSでツールチップを表示させる位置を調整する
- jQueryでフォーカスの動きに合わせてツールチップの動作を実装する
管理人
紹介した方法を参考にして、サイトのデザインなどに合わせて自分なりのツールチップを作ってみてください。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ
おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】