Xem Demo.
Các bước thực hiện như sau:
1. Bước 1: Đặt code CSS vào phần đầu của trang web, giữa 2 thẻ <head>, </head>.
<style type="text/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;
}
#myform {
border:1px outset #ccc;
background:#fff url(http://static.flowplayer.org/img/global/gradient/h600.png) repeat-x;
padding:20px;
margin:20px 0;
width:350px;
font-size:12px;
-moz-border-radius:4px;
}
#myform h3 {
text-align:center;
margin:0 0 10px 0;
}
/* http://www.quirksmode.org/css/forms.html */
#inputs label, #inputs input, #inputs textarea, #inputs select {
display: block;
width: 150px;
float: left;
margin-bottom: 20px;
}
#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}
#inputs br {
clear: left;
}
</style>
2. Bước 2: Đặt đoạn code jQuery bên dưới vào trước thẻ </head>./* 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;
}
#myform {
border:1px outset #ccc;
background:#fff url(http://static.flowplayer.org/img/global/gradient/h600.png) repeat-x;
padding:20px;
margin:20px 0;
width:350px;
font-size:12px;
-moz-border-radius:4px;
}
#myform h3 {
text-align:center;
margin:0 0 10px 0;
}
/* http://www.quirksmode.org/css/forms.html */
#inputs label, #inputs input, #inputs textarea, #inputs select {
display: block;
width: 150px;
float: left;
margin-bottom: 20px;
}
#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}
#inputs br {
clear: left;
}
</style>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
3. Bước 3: Đặt đoạn code jQuery dưới đây vào trước thẻ </body>.
<script>
// execute your scripts when the DOM is ready. this is a good habit
$(function() {
// 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
});
});
</script>
// execute your scripts when the DOM is ready. this is a good habit
$(function() {
// 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
});
});
</script>
4. Bước 4: Thiết lập cấu trúc HTML như dưới đây và đặt vào phần thân của trang web (giữa 2 thẻ <body>, </body>).
<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="Try to 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>
Những dòng chữ màu đỏ là phần nội dung hiển thị mà bạn cần sửa đổi cho hiệu ứng theo nhu cầu của bạn.
<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="Try to 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>
No comments:
Post a Comment