The tool tip is one of the important thing for forms because then only the customers easily identify which field it is. Now a days we will create everything for user friendly then only the customers easily understand.
The Tool tip is a one of the common graphical user interface element the tool tip gives Tool tips are beneficial for your website visitors. It is a set of information tells the customer for what refers the particular fields. we give it different way for example on text box click , on text box hover, on image click, on image hover like that.
Tool tip code:
tool-tip-for-form.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Form field tooltip</title>
<style type="text/css">
body {
background-color: #EEE;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
#mainContainer {
width: 400px;
background-color: #B7DBFF;
border: 1px solid #06C;
border-radius: 25px;
padding: 25px;
margin-left: auto;
margin-right: auto;
}
fieldset {
width: 400px;
}
</style>
<link rel="stylesheet" href="css/tool-tip-for-form.css" media="screen" type="text/css">
<script type="text/javascript" src="js/rounded-corners.js"></script>
<script type="text/javascript" src="js/form-field-tooltip.js"></script>
</head>
<body>
<br>
<br>
<div id="mainContainer">
<h1>Tool tip on click text box: </h1>
<table>
<tr>
<td>
<label for="firstname">First name:</label>
</td>
<td>
<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">
</td>
</tr>
<tr>
<td>
<label for="lastname">Last name:</label>
</td>
<td>
<input type="text" id="lastname" name="lastname" tooltipText="Type in your last name in this box">
</td>
</tr>
<br>
<tr valign="top">
<td>
<label for="address">Address:</label>
</td>
<td>
<textarea id="address" name="address" tooltipText="Please type your correct address here"></textarea>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var tooltipObj = new SANking_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEEEEE');
tooltipObj.setTooltipCornerSize(15);
tooltipObj.initFormFieldTooltip();
</script>
</body>
</html>
<html>
<head>
<title>Form field tooltip</title>
<style type="text/css">
body {
background-color: #EEE;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
#mainContainer {
width: 400px;
background-color: #B7DBFF;
border: 1px solid #06C;
border-radius: 25px;
padding: 25px;
margin-left: auto;
margin-right: auto;
}
fieldset {
width: 400px;
}
</style>
<link rel="stylesheet" href="css/tool-tip-for-form.css" media="screen" type="text/css">
<script type="text/javascript" src="js/rounded-corners.js"></script>
<script type="text/javascript" src="js/form-field-tooltip.js"></script>
</head>
<body>
<br>
<br>
<div id="mainContainer">
<h1>Tool tip on click text box: </h1>
<table>
<tr>
<td>
<label for="firstname">First name:</label>
</td>
<td>
<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">
</td>
</tr>
<tr>
<td>
<label for="lastname">Last name:</label>
</td>
<td>
<input type="text" id="lastname" name="lastname" tooltipText="Type in your last name in this box">
</td>
</tr>
<br>
<tr valign="top">
<td>
<label for="address">Address:</label>
</td>
<td>
<textarea id="address" name="address" tooltipText="Please type your correct address here"></textarea>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var tooltipObj = new SANking_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEEEEE');
tooltipObj.setTooltipCornerSize(15);
tooltipObj.initFormFieldTooltip();
</script>
</body>
</html>
tool-tip-for-form.css
#SANking_formTooltipDiv{
color:#FFF;
font-family:arial;
font-weight:bold;
font-size:0.8em;
line-height:120%;
}
.SANking_formTooltip_closeMessage{
color:#FFF;
font-weight:normal;
font-size:0.7em;
}
0 Comments