Form Help tip on mouse hover | Sanwebcorner

Form Help tip on mouse hover

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

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;

}

The result of  Form Help tip is look Like below image:

form-help-tip

Post a Comment

Labels

360 degree view product image 3d rotate 3d text 3step-form Accordion menu ajax All Browsers Animated Background Gradient animation audio controller auto complete Best accordion menu bootstrap border bounce effect on hover Breadcrumb calculate age by dob calendar Captcha change image on mouse move color chooser countdown Counter on scroll Css css animation css buttons css hover css3 customized upload Button Date picker delete data from table Different scroll speed email otp verification email verifier Embed eventlist Expanding Menu feedbck form flash news section close button full screen menu Google custom search Google Maps Google reCAPTCHA Google site search gradient hide menu Horizontal News ticker Hover Htm Html html dropdown html form html5 html5 form validation Iframe image hover increment decrement textbox value based on select box Javascript Jquery js Layered image effect on mouse hover lock & unlock page scroll marquee marquee with close button mobile number validation mobile otp login Multi-level-drop-down-menu multi-level-form Multi-Step-form mysql News ticker on hover change text to image our team page password strength checker Photoshop PHP populate html selectbox Popup image on click the link pure css Question type form Random password Redirect page Based on the select box while submit the form responsive responsive menu responsive popup box Responsive Vertical Time line design rotate image selectbox based on select box simple coming soon page simple countdown based on end date simple typing effect slider sliding tab sms otp login statistic counter on scroll switch tag shape team member Time picker toggle toggle view transparent button underline animation up down slide validation vertical fixed sidebar Webtips Youtube