読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

ツールチップ

<スポンサーリンク>

ツールチップって何?

フォームにマウスをのせたときに、吹き出しみたいに出るアレのこと。
名前を入力するフォームにカーソルを当てたら、「名前を入力してください」って出るみたいな。
入力時の注意喚起に使われたりする。

しょぼいけどとりあえずツールチップを出してみるサンプル

こんな感じのイメージを表示させるサンプル

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ツールチップのサンプル</title>
<link rel="stylesheet" type="text/css" href="style_tooltip.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script type="text/javascript">
	$(".tooltip").each(function() {
		var toolTip = $('<div class="tooltip-body">');
		var toolTipText = $(this).attr("title");
		toolTip.prepend('<p>' + toolTipText + '</p><span class="tail"></span>').hide();
		$("body").css("position", "relative").append(toolTip);
		var targetPostion = $(this).offset();
	});
</script>
</head>
<body>
<h1>ツールチップ、出してみせます!</h1>
<p>
	<input class="placeholder tooltip" title="名前を入力してね!" type="text" name="name" id="name" value="">
</p>
</body>
</html>

CSSはこんな感じ

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

.tail {
	position:absolute;
	display:block;
	position:absolute;
	display:block;
	bottom: -12px;
	left: 45%;
	width: 12px;
	height: 12px;
	no-repeat 0 0;
}

感謝のプログラミング

今回で感謝のプログラミングは【600時間目】
10000時間まで、あと【9400時間】