ホーム >  JavaScript >  inputから吹き出しツールチップを出す


Posted:2015/05/15 9:00:42 AM|Category : JavaScript

inputから吹き出しツールチップを出す

フォーム要素をフォーカスしたとき、吹き出しツールチップを出現させます。時間がたつと自動的に消える仕組みにします。今回紹介するツールチップは、前回紹介した「ユーザーフォームにラベルテキストを内包する」の続きです。

完成イメージ
css0032

吹き出しツールチップの中のテキストは、inputタグのtitle属性から取得します。

ツールチップとは?

ツールチップとは、コンピューターの表現方法の一つです。対象にカーソルやマウスポインタを合わせると周辺に小さな領域が出現し、注釈などが表示されます。a要素から注釈を出すときなどによく利用されます。

ファイル構成

ファイルをサイトのフォルダに配置します。サイトフォルダ名を「sample」とします。※wordpress基準ですが、wordpressでなくても作成できます。

  • sample/
  • index.php
  • style.css
  • css/
  • sample.css
  • js/
  • vendor/
  • jquery.min.js

コード

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ご購入のながれ :: Lovely Cafe</title>
  <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() . '/css/sample.css' ; ?>" media='all'>
	<script src="<?php echo get_template_directory_uri() . '/js/chapter01/jquery-1.8.2.min.js' ; ?>"></script>
<script>
/* ツールチップ用に独自メソッドを作成 */
$.fn.hideTooltip = function() {
    $(this).animate({
            "top": "-=" + 10 + "px",
            "opacity": "0"
            }, 250, function(){
            $(this).hide();
    });
    return this;
}
 
$(function(){
    $(".tooltip").each(function(){
 
        var toolTip = $('<div class="tooptip-body">');
 
        var toolTipText = $(this).attr("title");
 
        toolTip.prepend( '<p>' + toolTipText + '</p><span class="tail"></span>' ).hide();
 
        $("body").css("postion", "relative").append(toolTip);
 
        var targetPostion = $(this).offset();
 
        $(this).focus(function(){
            toolTip.css({
                "position": "absolute",
                "top": targetPostion.top - 55 + "px",
                "left": targetPostion.left + 20 + "px",
                "display":"block",
                "opacity": "0",
                "z-index": "9999"
            })
            .stop().animate({
                "top" : "-=" + 10 + "px",
                "opacity": "1"
            }, 250, function(){
                toolTip.delay(2000).hideTooltip();
            });
        })
        .blur(function(){
            if(toolTip.css("display") == "block"){
                toolTip.stop().hideTooltip();
            }
        });
    });
});
</script>
</head>
<body>
<div class="single">
  <form method="post" action="#" id="contact">
    <p>
      <input class="placeholder tooltip" title="お名前を入力してください" type="text" name="name" id="name" value="お名前">
    </p>
    <p>
      <input class="placeholder tooltip" title="メールアドレスを入力してください" type="text" name="mail" id="mail" value="メールアドレス">
    </p>
    <p>
      <textarea class="placeholder tooltip" title="お問い合わせ内容を入力してください" name="message" id="message">お問い合わせ内容</textarea>
    </p>
      <p class="center">
      <input type="submit" id="submit" value="送信">
    </p>
  </form>
</div>
</body>
</html>

sample.css

@charset "UTF-8";
 
body { padding: 0 2em 2em; 
	background-color: #ddd;}
img { margin: 0 0 1em; }
ul a { text-decoration: none; }


.single{
	margin: 0 auto;
	width: 620px;
}

.contact #row h2{ margin-top: 30px; }

/* contact */

.contact dl{
	margin-bottom: 1.5em;
	padding-left: 0;
	width: 70%;
	border: none;
}

.contact dt{
	float: left;
	margin-bottom: .5em;
	width: auto;
}

/****************************************

		Contact Form

*****************************************/

#contact{
	margin: 40px 0 80px;
	background: url(images/postmark.png) no-repeat 100% 0;
}

#contact input[type="text"],
#contact textarea{
	display: inline-block;
	margin: 0;
	margin-bottom: 20px;
	padding: 10px;
	max-width: 100%;
	width: 244px;
	outline: none;
	border: 1px solid #80555c;
	border-radius: 5px;
	background: #f4f1ec;
	box-shadow: 0 1px #fff;
	color: #555;
	font-size: 14px;
}

/*#contact input[type="text"]{
	padding-left: 40px;
}*/

#contact textarea{
	overflow: auto;
	/*padding-left: 40px;*/
	width: 600px;
	height: 150px;
}

#contact input[type="text"]:focus,
#contact textarea:focus{
	background: #fff;
}

#contact p{
	position: relative;
}

/* Tooltip */

.tooptip-body{
	position: absolute;
	padding: 0 1em;
	border: 1px solid #e9a9b5;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 1px 1px rgba(0,0,0, .4);
}

.tail{
	position:absolute;
	bottom: -12px;
	left: 45%;
	display: block;
	width: 12px;
	height: 12px;
	background: url(../images/tooltip-tail.png) no-repeat 0 0; /* 三角の画像 */
}

jquery.min.js

jQueryのライブラリです。以下からダウンロードします。
jQuery

解説

1.吹き出しツールチップのdivを作成

入力フォームを記述します。inputタグのclassに「tooltip」を指定します。吹き出しツールチップ内で表示する内容は、title属性から取得します。

  <form method="post" action="#" id="contact">
    <p>
      <input class="placeholder tooltip" title="お名前を入力してください" type="text" name="name" id="name" value="お名前">
    </p>
    <p>
      <input class="placeholder tooltip" title="メールアドレスを入力してください" type="text" name="mail" id="mail" value="メールアドレス">
    </p>
    <p>
      <textarea class="placeholder tooltip" title="お問い合わせ内容を入力してください" name="message" id="message">お問い合わせ内容</textarea>
    </p>
  </form>

2.jQueryコードを記述する

ツールチップを表示するためのjQueryを記述します。記述する場所は、の直前など下部に記述すればページ読込速度への影響を抑えることができます。

	<script>
	/* ツールチップ用に独自メソッドを作成 */
	$.fn.hideTooltip = function() {
		$(this).animate({
				"top": "-=" + 10 + "px",
				"opacity": "0"
                }, 250, function(){
				$(this).hide();
		});
		return this;
	}

	$(function(){
		$(".tooltip").each(function(){

			var toolTip = $('<div class="tooptip-body">');

			var toolTipText = $(this).attr("title");

			toolTip.prepend( '<p>' + toolTipText + '</p><span class="tail"></span>' ).hide();

			$("body").css("postion", "relative").append(toolTip);

			var targetPostion = $(this).offset();

			$(this).focus(function(){
				toolTip.css({
					"position": "absolute",
					"top": targetPostion.top - 55 + "px",
					"left": targetPostion.left + 20 + "px",
					"display":"block",
					"opacity": "0",
					"z-index": "9999"
				})
				.stop().animate({
					"top" : "-=" + 10 + "px",
					"opacity": "1"
				}, 250, function(){
					toolTip.delay(2000).hideTooltip();
				});
			})
			.blur(function(){
				if(toolTip.css("display") == "block"){
					toolTip.stop().hideTooltip();
				}
			});
		});
	});
	</script>
独自のメソッド作成

13行目のjQueryは独自メソッドを作成できます。重複したコードをまとめるときに利用します。以下のように記述します。

$.fn.メソッド名:function(引数){
  //コード記述
}

3行目は、ツールチップを消すメソッドです。
hideTooltipという名のメソッドを作ります。
animateメソッドとhideメソッドを一まとめにします。

each

13行目の「.each」で大枠を作ります。

tooltip-body

16行目の「tooltip-body」というクラスのdiv要素を作成します。コードを、「toolTip」という変数に代入します。

title属性取得

18行目の「toolTipText」という変数に、title属性を格納します。
「$(this).attr(“title”)」で取得できます。

prependでtooltip作成

20行目は、tooltipを作ります。prependメソッドを使い、p要素とspan要素を作ります。最後の「.hide()」で非表示にします。

body要素末尾にツールチップ挿入

22行目は、body要素末尾に作成したツールチップを挿入します。
ツールチップは、絶対配置にするため「position: relative」を指定します。

input要素の座標

24行目は、input要素の座標を取得し、変数「targetPostion」に格納します。input要素のオブジェクトは、$(this)で取得できます。

focusイベント

26行目からfocusイベントの大枠を作ります。吹き出しがふわっと出現するアニメーションを作成するためです。animateメソッドとcssメソッドを使います。

要素のスタイルを指定

27行目は、「tooltip.css」で要素のスタイルを指定します。top、leftには先ほど取得したtargetPostionの値を入力します。topには「targetPostion.top」を指定します。leftには「targetPostion.left」を指定します。そのままですとinput要素と重なってしまうため、55px・22pxと位置を調整します。「display:block」にし、「opacity:0」に設定して透明にします。

animateメソッドでフェード効果

35行目は、animateメソッドでフェードアウト効果を表現します。topを上に10pxだけずらします。「opacity:1」にして吹き出しを表示します。
animateメソッドの直前にstopメソッドが記述してあります。stopメソッドでアニメーションを中止します。アニメーション中にanimateメソッドが実行されると挙動がおかしくなります。一度stopメソッドでキャンセルしてからanimateメソッドを実行します。

※animateメソッドについて
animateメソッドは、処理が終わってから次の処理を実行することができます。アニメーションが終わったら、[callback]を実行します。

$(セレクタ).animate({
  //アニメーション記述
},250, [callback]);

メソッドチェーンで以下のように繋いだ場合、アニメーションの終了を待たずに次の処理が実行されます。fadelnやfadeOutなど、他のアニメーション系メソッドも同じです。

$(セレクタ).animate({
  //アニメーション記述
},250, [callback]);
delayメソッドでアニメーションを遅らせる

39行目は、delayメソッドでアニメーションの開始を遅らせます。2000ミリ秒たったらanimateで吹き出しを非表示にします。非表示にする場合は、最初に定義した「hideTooltip」関数を使って非表示にします。

フォーカスが外れたときも吹き出しを消す

42行目は、フォーカスが外れたときも吹き出しを消す処理を記述します。
blurメソッドを使用します。ツールチップは、時間が経過すれば消える仕組みになっています。無駄な処理をしないよう、ツールチップの「display」がblockだったとき「hideTooltip」関数を実行します。

3.tooltip本体のスタイルを記述

ツールチップの本体をdiv要素で作成します。
そのdiv要素は、p要素とspan要素を内包します。

css0033

.tooptip-body{
	position: absolute;
	padding: 0 1em;
	border: 1px solid #e9a9b5;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 1px 1px rgba(0,0,0, .4);
}

.tail{
	position:absolute;
	bottom: -12px;
	left: 45%;
	display: block;
	width: 12px;
	height: 12px;
	background: url(../images/tooltip-tail.png) no-repeat 0 0; /* 三角の画像 */
}

トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告