Form Help tip or Tool tip is used to explain about the particular text box or select or any type of field. It is very useful the customers to know what is corresponding field refers. This script is very useful to the developers to develop the form and tool tips. This is also called as a Form Help tip.
 |
| form-help-tip |
In this Tutorial i am going to explain how the form help tip is working. This is very useful and customer easily understand the field. In this program i given one image in right hand side when you move the cursor to the image it will show the hint for the particular field and also when you click the text box it will give the same hint.
Html code for Form Help Tip:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form Help - tip</title>
<link rel="stylesheet" type="text/css" href="san.css" media="all" />
<script type="text/javascript" src="http://ecto.lt/external/js/jquery.js"></script>
<script type="text/javascript" src="http://ecto.lt/external/js/jquery.formtip.js"></script>
</head>
<body>
<div class="body">
<div class="content">
<center>
<h1>Form Help-Tip:</h1>
</center>
<form id="form2" action="" method="post" onsubmit="return false;">
<ul class="formBlock">
<li>
<dl>
<dt>Your Name: </dt>
<dd><input name="login" type="text" value="" class="formInput" /></dd>
<dd><img id="help1" class="icons icon_help" src="tip-icon.png" alt="" /></dd>
</dl>
</li>
<li>
<dl>
<dt>Enter Password: </dt>
<dd><input name="pwd" type="password" value="" class="formInput" /></dd>
<dd><img id="help2" class="icons icon_help" src="tip-icon.png" alt="" /></dd>
</dl>
</li>
<li>
<dl>
<dt>Re-Enter Password: </dt>
<dd><input name="re-pwd" type="password" value="" class="formInput" /></dd>
<dd><img id="help3" class="icons icon_help" src="tip-icon.png" alt="" /></dd>
</dl>
</li>
<li>
<dl>
<dt>Email: </dt>
<dd><input name="email" type="text" value="" class="formInput" /></dd>
<dd><img id="help4" class="icons icon_help" src="tip-icon.png" alt="" /></dd>
</dl>
</li>
</ul>
<br />
<center>
<p><a href="http://www.sanwebtutorials.blogspot.in/">San Web Tutorials</a></p>
</center>
</form>
<script type="text/javascript">
<!-- //
$(document).ready(function()
{
$('#form2 input[name="login"]').formtip({
message : 'Please Enter Your Name',
handler : '#help1'
});
$('#form2 input[name="pwd"]').formtip({
message : 'Please Enter Your Password.',
handler : '#help2'
});
$('#form2 input[name="re-pwd"]').formtip({
message : 'Please Re-Enter Your Password.',
handler : '#help3'
});
$('#form2 input[name="email"]').formtip({
message : 'Please Enter your valid Email This is very important for us.',
handler : '#help4'
});
});
// -->
</script>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form Help - tip</title>
<link rel="stylesheet" type="text/css" href="san.css" media="all" />
<script type="text/javascript" src="http://ecto.lt/external/js/jquery.js"></script>
<script type="text/javascript" src="http://ecto.lt/external/js/jquery.formtip.js"></script>
</head>
<body>
<div class="body">
<div class="content">
<center>
<h1>Form Help-Tip:</h1>
</center>
<form id="form2" action="" method="post" onsubmit="return false;">
<ul class="formBlock">
<li>
<dl>
<dt>Your Name: </dt>
<dd><input name="login" type="text" value="" class="formInput" /></dd>
<dd><img id="help1" class="icons icon_help" src="tip-icon.png" alt="" /></dd>
</dl>
</li>
<li>
<dl>
<dt>Enter Password: </dt>
<dd><input name="pwd" type="password" value="" class="formInput" /></dd>
<dd><img id="help2" class="icons icon_help" src="tip-icon.png" alt="" /></dd>
</dl>
</li>
<li>
<dl>
<dt>Re-Enter Password: </dt>
<dd><input name="re-pwd" type="password" value="" class="formInput" /></dd>
<dd><img id="help3" class="icons icon_help" src="tip-icon.png" alt="" /></dd>
</dl>
</li>
<li>
<dl>
<dt>Email: </dt>
<dd><input name="email" type="text" value="" class="formInput" /></dd>
<dd><img id="help4" class="icons icon_help" src="tip-icon.png" alt="" /></dd>
</dl>
</li>
</ul>
<br />
<center>
<p><a href="http://www.sanwebtutorials.blogspot.in/">San Web Tutorials</a></p>
</center>
</form>
<script type="text/javascript">
<!-- //
$(document).ready(function()
{
$('#form2 input[name="login"]').formtip({
message : 'Please Enter Your Name',
handler : '#help1'
});
$('#form2 input[name="pwd"]').formtip({
message : 'Please Enter Your Password.',
handler : '#help2'
});
$('#form2 input[name="re-pwd"]').formtip({
message : 'Please Re-Enter Your Password.',
handler : '#help3'
});
$('#form2 input[name="email"]').formtip({
message : 'Please Enter your valid Email This is very important for us.',
handler : '#help4'
});
});
// -->
</script>
</div>
</div>
</body>
</html>
san.css
html,
body,
div,
dl,
dt,
dd,
h1,
h2,
h3,
pre,
form,
label,
fieldset,
input,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
ol,
ul {
margin: 0;
padding: 10px 10px 10px 30px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img {
border: 0;
}
:active,
:focus {
outline: 0;
}
acronym {
cursor: help;
}
button {
cursor: pointer;
}
textarea {
overflow: auto;
}
p {
padding-bottom: 10px;
}
html,
body,
table,
input,
select,
textarea,
button {
font: 13px Arial;
color: #1111;
}
input,
select,
textarea {
font-size: 14px;
color: #000;
padding: 3px 4px;
border-top: 1px solid #bfbfbf;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
border-left: 1px solid #bfbfbf;
}
input:focus,
select:focus,
textarea:focus {
border-top-color: #822f02;
border-right-color: #822f02;
border-bottom-color: #822f02;
border-left-color: #822f02;
background: #fce2d4;
}
h1 {
color: #000;
margin-bottom: 10px;
font-size: 24px;
font-weight: normal;
text-transform: normal;
letter-spacing: -1px;
line-height: 1em;
}
.formBlock .icon_help {
margin: 6px 0 0 10px;
}
div.body {
width: 780px;
overflow: hidden;
margin: 25px auto;
}
div.content {
margin-right: 188px;
padding: 20px;
background:#DADADA;
border-radius:30px;
}
/** Form */
ul.formBlock {
list-style: none;
padding: 0;
}
ul.formBlock li {
display: block;
}
ul.formBlock li dl {
/*position:relative; TODO: kam sitas cia? */
overflow: hidden;
padding: 2px 0;
}
ul.formBlock li dl dt,
ul.formBlock li dl dd {
float: left;
display: block;
}
ul.formBlock li dl dt {
width: 120px;
text-align: right;
padding: 4px 5px 0 0;
font-size: 12px;
}
ul.formBlock li dl dd b.value {
font-size: 14px;
line-height: 18px;
}
ul.formBlock .formInput,
ul.formBlock .formTextarea,
ul.formBlock .formSelect {
padding: 4px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
}
ul.formBlock .formInput {
width: 350px;
}
ul.formBlock .formTextarea {
width: 350px;
height: 50px;
}
ul.formBlock .formTextareaBig {
width: 550px;
height: 100px;
}
ul.formBlock .formSelect {
width: 360px;
}
ul.formBlock .formCheckbox {
margin-top: 3px;
}
ul.formBlock .formText {
padding: 2px 0;
}
ul.formBlock .formSelectBlock {
border: 1px solid #ccc;
overflow: auto;
width: 200px;
max-height: 100px;
}
ul.formBlock .formSelectBlock input {
vertical-align: middle;
margin: 3px;
}
ul.formBlock .formSelectBlock label {
display: block;
padding: 3px 5px;
line-height: 14px;
}
ul.formBlock p {
padding: 3px 0 7px;
}
.shortInputs .formInput,
.shortInputs .formTextarea {
width: 200px !important;
}
.shortInputs .formSelect {
width: 206px !important;
}
.ui-tooltip {
font-size: 0.8em;
max-width: 200px;
border: 1px solid #000;
padding: 8px 12px;
line-height: 1.3em;
background: #fbe9c5;
}
0 Comments