New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


NS6+ IE5+ Opera 7+

Show Hint script

Author: Dynamic Drive

Description: "Show Hint" script displays an attractive hint box 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.

We could all use a good hint, that's for sure!

Demo:

Username: [?]
Password:   [?]


Directions: Developer's View

Step 1: Add the below script to the <HEAD> section of your page:

Select All

Step 2: Add the below sample form to your page, which shows "Hint Me" in action:

Select All

More Information

As seen in the code of Step 2, the entire HTML for a hint consist of:

<a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a>

The part in red, function showhint(), is what you need to customize for each one of your hints:

showhint('hint_here', this, event, 'hint_width')"

The first parameter, "hint_here", is the text for your hint. HTML is supported (ie: "<b>must</b>"), though if it contains apostrophes, be sure to backslash them (ie: "I\'m the king of the world").

The fourth parameter is an optional width of the hint box. If you omit this parameter, the default width as specified in the CSS is used.