2020/07/10

【jQuery】入力フォームでフォーカス時にツールチップを表示させる方法

Programming Web

Web制作者
「ツールチップで入力フォームをすっきりさせたい」
「ツールチップを実装する方法が知りたい」

こういった要望にお応えします。

本記事の内容

jQueryを使った入力フォームにツールチップを実装する方法

こんにちは、mineです。
Web制作歴は7年になります。

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日分を取得した話

おすすめ記事お名前.comのドメインプロテクションは必要か【採算がとれるか】

Programming