Forms ~ Show Hint on Mouseover ~ Tested in IE6.0, Netscape8.1, Opera9.01, Firefox1.5.0.6 and AOL Explorer1.2

Script displays an attractive hint box (that can be customized to fit your site) containing additional explanation on any item on your page. A hint box pops up next to the item when the mouse moves over it with relevant hints or useful information. A classic use of "Show Hint" is with your form fields*, to better explain to the user how to fill them out.

* This example is set up for an input box that you need to incorporate into a valid form. You can modify this to have it for just about anything you want. Further down we will show you where and howto reconfigure it for another use other than with forms.

We have tested the code in IE6.0, Firefox1.5.0.6, Opera9.01, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

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 and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and java scripts, this is an easy, three (3) part copy and paste code with minimal reconfigurations.

Copy/Cut & Paste the coding into the <HEAD> section, (two 2 parts) of your HTML document.

Incorporate the <BODY> section into a functional form*(See above asterick) .

CSS <HEAD> Section

Explanations

background-color: white; This is what color the background on the hint will be.
width: 150px; This is self-explained. This is how wide the tip will be.
border:3px solid plum; This denotes how wide the left and top border will be and what color.
font:normal 11px Verdana; This is all about the text inside the hint.
border-right: 3px solid plum; This denotes how wide and what color the right side border will be.
border-bottom: 3px solid plum; This denotes how wide and what color the bottom border will be.
font-weight: bold;
color: navy;
margin: 3px 8px;
The above three (3) configurations are for the [?]
place cursor on above [?] for explanations
Final Note: You can change the word solid to dotted and have a completely different look Grab below link so see what we are explaining:
[ Border Changed From Solid To Dotted ]

There is one other reconfiguration that can be made within the <HEAD> section of the code. This is "Not" in the CSS section but in the javascript section at the beginning.

Explanations

var horizontal_offset="9px ~ This is the positioning setting for how far from the right of the [?] the tip will be located. You "Can use negative numbers here. Just play around with it until it suits you and your site.
var vertical_offset="0" This also can be changed if you need to. This positions the tip up and down in relation to the [?]. You "Can use negative numbers here. Just play around with it until it suits you and your site.

The next section that can be reconfigured is in the <BODY> section. In the above example, you need to now incorporate the text box(s) into a valid working form. Once done, now you can reconfigure the hint you want to appear on mouseover.

<form>
<b>Username:</b> <input type="text" class="test" /> <a href="#" class="hintanchor"
onMouseover="showhint('Your Hint Goes Here', this, event, '150px')">[?]</a>

Define Above Areas Of Reconfiguration

showhint('Your Hint Goes Here', ~ This is where you will place your hint, messages, etc.
this, event, '150px')" ~ This is how wide this specific tip will be when it appears.
Notice in the above code that both the apostrophe (') and the quotation mark(") are used. "Do Not" remove any or switch them around or the effect will not work and you will wonder why.
Also notice we did not emphasize the " marks inside the text box itself
<input type="text" class="test" />. Reason being is quite simple. This part of the code can be removed and replaced with whatever you like, words images, etc. If this is unclear see the following examples

For example, the cornucopia [?] is a typical emblem of Thanksgiving abundance that dates to ancient harvest festivals.

For example, the cornucopia <a href="#" class="hintanchor"
onMouseover="showhint('Hint Goes Here, this, event, '200px')">[?]</a> is a typical emblem of Thanksgiving abundance that dates to ancient harvest festivals.

Notice we removed from the default the:
<b>Username:</b> <input type="text" class="test" />

And was left with the code itself that makes the hint work.

Little Extra Not Included In The Script: If you noticed in our above [ Popup Example ] the caption for adding images. It can be done but only in a certain way and do not deviate from it or the image will not appear, the script will not work and everything will look nothing like it should.

<a href="#" class="hintanchor" onMouseover="showhint('<img src=Path To Uploaded Image Here border=0 width=? height=? alt=?>', this, event, '200px')">[?]</a>

In the above Image Code the lack of quotation marks (") surrounding the image path and attributes. If you would write the image tag with the (") marks, the effect would not work. If this is a little unclear, see below:

Right Way: <a href="#" class="hintanchor" onMouseover="showhint('<img src=Path To Uploaded Image Here border=0 width=? height=? alt=?>', this, event, '200px')">[?]</a>

Wrong Way: <a href="#" class="hintanchor" onMouseover="showhint('<img src="Path To Uploaded Image Here" border="0" width="?" height="?" alt="?">', this, event, '200px')">[?]</a>

The <HEAD> section of code (Not The CSS Section) can be made into a .js file and call it from an external location as we have done. If you are unfamiliar with the howto or need a little refresher on this, see below:

The first thing you must do with the code is to remove the opening and closing script tags, paste what is left into a notepad and save as hint.js

<script type="text/javascript"> Opening Script Tag

</script> Closing Script Tag
Once you have done that, now you will have a file that looks something like this:
Once you have done that, now you need to upload the hint.js file into your directory.
Once you have done that, now you need to insert a snipplet of code into the <HEAD> section of the document where the game will be located.

<script type="text/javascript" src="hint.js"> </script>
The above little snipplet of code is what is calling the <HEAD> section of the code to make the effect work.

If you would like to view our "Source Code" we have it well documented on the external.js file we used in the <HEAD> section.

For your Information: If you would like a full tutorial on howto make an external .js file, grab the below link and you are there. The above five (5) steps are for all intensive purposes the abridged quick method that usually works for most people.
[ Howto Make An External .js File ]

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 Code Here ] [ Rate This Page ]