ここで、次のフォームフィールドのいずれかに焦点を置いた場合、ツールチップを見ることができます。 キーボード(TABキーを使用)またはマウスでフィールド間を移動することができます。
ここに、HTMLの構成があります。各ツールチップは、それぞれフォーム要素の title 属性に指定しています:
<form id="myform" action="#">
<h3>Registration Form</h3>
<div id="inputs">
<!-- username -->
<label for="username">Username</label>
<input id="username" title="Must be at least 8 characters."/>
<br />
<!-- password -->
<label for="password">Password</label>
<input id="password" type="password" title="Make it hard to guess." />
<br />
<!-- email -->
<label for="email">Email</label>
<input id="email" title="We won't send you any marketing material." />
<br />
<!-- message -->
<label for="body">Message</label>
<textarea id="body" title="What's on your mind?"></textarea>
<br />
<!-- message -->
<label for="where">Select one</label>
<select id="where" title="Select one of these options">
<option>-- first option --</option>
<option>-- second option --</option>
<option>-- third option --</option>
</select>
<br />
</div>
<!-- email -->
<label>
I accept the terms and conditions
<input type="checkbox" id="check" title="Required to proceed" />
</label>
<p>
<button type="button" title="This button won't do anything">
Proceed
</button>
</p>
</form>
このフォームは、最小限のCSSスタイルを持っています。スタンドアロン・ページのソースコードから、 それを見ることができます。
ここに、ツールチップの "skin" があります。 画像や背景画像を全く使わない、全てが純粋なCSSだけです:
/* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
すべてのツールチップは、以下の設定で有効になります。ツールチップが表示されるのイベントを カスタマイズしたい場合、ツールチップのドキュメントから、 イベント管理を読んでください。
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});