投稿日： ｜ 最終更新日:
inputから吹き出しツールチップを出す
フォーム要素をフォーカスしたとき、吹き出しツールチップを出現させます。時間がたつと自動的に消える仕組みにします。今回紹介するツールチップは、前回紹介した「ユーザーフォームにラベルテキストを内包する」の続きです。
完成イメージ
吹き出しツールチップの中のテキストは、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を記述します。記述する場所は、
