デモ:フォームに対応したツールチップ

jQuery toolsによる「フォームに対応したツールチップ」の動作デモです。

サンプルコード

HTMLのサンプル

<form action="">
<label>名前:<input type="text" title="フルネームで入力してください" /></label>
<label>電話:<input type="text" title="半角数字で入力してください" /></label>
<label>住所:<input type="text" title="すべて全角で入力してください" /></label>
<label>備考:<textarea title="全角300文字以内で入力してください"></textarea></label>	
</form>

CSSのサンプル

/* ツールチップのスタイル 挿入場所はbodyの一番下になります。 */
.tooltip {
	display:none;
	background: #666;
	border: solid 4px #eee;
	font-size:12px;
	width:160px;
	padding:10px;
	color: #eee;
	border-radius:5px;
	box-shadow: #59698F 1px 1px 2px;
}
.tooltip h3{
	border-bottom: solid 1px #eee;
}
/* トリガーになる画像へのスタイル */
#example img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}
/* フォームへのスタイル */
#example form{
	border-solid: solid 3px #ccc;
}
#example label{
	display: block;
	width: 500px;
	padding: 5px;
	border: solid 1px #eee;
	margin-bottom: 1px;
}
#example label input,
#example label textarea{
	width: 400px;
}

Javascriptのサンプル

$(document).ready(function() {
	$("#example input[title],#example textarea[title]").tooltip({
		position: "center right",			   // エフェクト
		offset: [0 , 10],                // オフセット [y, x]
		layout: "<div><h3>チップス</h3></div>" // ツールチップの構成要素(外郭)
	});
});