Form Field Hints - Tested in IE 7.0, Netscape 8.1.3, Opera 9.20, Firefox 2.0.0.3 and AOL Explorer 1.5

Provide helpful hints alongside certain form fields to guide your users on how to fill them out with this elegant script. A hint pops up only when the field is question has the user focus.

We have tested the code in IE 7.0, Firefox 2.0.0.3, Opera 9.20, Netscape 8.1.3 and AOL Explorer 1.5. This script worked well in all platforms with one (1) variation observed in Netscape 8.1.3 and Firefox 2.0.0.3.

In both platforms the popup hint does not adhere to the absolute positioning coodinates set forth within the CSS section of code in the <HEAD> section.
This does not hamper the effect in any way, shape or form.
To see a visual on the variation, [ Click Here ]

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms, CSS Style Sheets and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is an easy three (3) part copy and paste code that goes in both the <HEAD> section (two parts, a css section that you can reconfigure and a javascript section with no reconfigurations) and <BODY> (incorporated into a working form) section of your document. The third part is to "Save As" and upload an image into your directory for use within this script.

We at this time do not feel a full tutorial is warranted at this time. The script site has excellent step by step instructions you can follow. We will just expand on a few points that are not covered on the script site itself.

There are two (2) places that call the image you have uploaded and the site script site tells you to
"......This script uses an image as part of the Hints interface.. Download it below (and upload to same directory as webpage by default):....."

You can upload the image into any directory you want. See below where and howto change the path to call the image in both places. This is located within the CSS part of the <HEAD> section.

First Section

.hint {
display:none;
position: absolute;
right: -200px;
width: 200px;
margin-top: -4px;
border: 1px solid #c93;
padding: 10px 12px;
background: #ffc url(pointer.gif)
-100px -100px no-repeat;
}

Second Section

.hint .hint-pointer {
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 19px;
background: url(pointer.gif)
left top no-repeat;
}
</style>

The above places are configured to call the image from your top or root directory. To change this to whatever directory you have saved the image, just add the directory name and a / prior to the pointer.gif. In other words we have our image called from a directory named "images1" so the reconfigured path would look like the below in both places;

url(images1/pointer.gif)

The form you will see from the script site is not the one you are viewing in our example. This one has been expanded on to show more options that it is capable of handling. The CSS section is almost the same but you will need to remove a little section of code (from this section and from the <BODY> section) or you will receive an error in the task bar*. The javascript part of the <HEAD> section is slightly different to accommodate the use of textareas along with text input elements.

* Below we will show where to remove a section of code within both the <HEAD> and <BODY> sections that is not necessary to your form. It was needed in the example but it should not be needed for you.

<HEAD> Section Removal - Expanded Code

<BODY> Section Removal - Expanded Code

<h1>Form field hints with CSS and JavaScript</h1>
<h2>Example 7: With a textarea</h2>
<p>Tab or click through the fields to reveal the hints.</p>



<dl>
<dt>
<label for="firstname">First Name:</label>

For your Information: If you opt to get the "Expanded Code", when the page opens, view the "Source Code" to get it. This example comes from the website of the [ CSS Guy ] who designed this script.

Note Of Importance: On the page you are going to have this effect on or any page that will link to the page with this effect is on, be sure of one thing within either the linking URL or the URL this effect is on. Be sure you "Do Not" have the backslash-forward slash / (which ever you call it) at the end of the linking URL. If you do, the effect "Will Not Appear Correctly!. The little graphic you uploaded will not appear as you click or tab through the fields and you will wonder why. If this sounds confusing, see the below example:

Right Way: https://www.angelfire.com/ny5/consigliere/formfieldhints.html
Wrong Way: 'https://www.angelfire.com/ny5/consigliere/formfieldhints.html/

S elect the links above to see what we are explaining about the Right and Wrong URL address.

If you make either or both the <HEAD> sections of code into external files such as .css and or .js when you click or tab through the elements you will have the same problem as above. In other words the little pointer.gif you uploaded will not be present. This goes to the point that any external files on the page will cause the same unwanted effect of no little pointer.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Default Code Here ] [ Rate This Page ]
[ Get Expanded Code Here ]