0 Members and 1 Guest are viewing this topic.

AuthorTopic: basic การใช้ tooltip ด้วย jquery  (Read 2095 times)

Offline aegkaluk

  • Administrator
  • Hero Member
  • *****
  • Posts: 1103
  • Total Like : 0
    • Email
« on: 08, 12, 2011, 15:45:14 »
Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>HTML5</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
<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;
}
</style>
<script type="text/javascript">
$(document).ready(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>
</head>
<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>
</body>
</html>

lmdangnokzz

  • Guest
« Reply #1 on: 13, 07, 2012, 15:41:58 »
ขอบคุณมากๆเลยคร๊าบ สำหรับข้อมูลดีๆ