Tạo hiệu ứng Tooltip trong trường dữ liệu của Form

Posted by chiasedamme on Monday, October 25, 2010

Tooltip là một thành phần giao thức người dùng khá phổ biến. Nó được sử dụng để tạo hiệu ứng con trỏ. Người dùng web rê con trỏ qua một đối tượng mà không kích trỏ vào nó, thì hiệu ứng tooltip xuất hiện với một khung nhỏ chứa thông tin về đối tượng đã được rê chuột.

Chúng ta có thể sử dụng tooltip trong những trường dữ liệu (field) của một Form. Bạn có thể di chuyển giữa các trường bằng bàn phím (sử dụng phím TAB) hoặc bằng chuột.

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>.
<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>

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.

{ 0 comments... read them below or add one }

Post a Comment