Bookmark to del.icio.us
NS6+ IE5+ Opera 7+
Show Hint script
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!
Step 1: Add the below script to the <HEAD> section of your page:
Step 2: Add the below sample form to your page, which shows "Hint Me" in action:
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.