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


FF1+ IE5+ Opr7+

Bottom slide tooltip

Note: Modified by DD for minor code changes

Description: This bottom slide-in box can be used as an "aid" or "tooltip" for your page elements. Move your mouse over the element in question (must support the onMouseover event, such as <A> tag), and a description will slide in from the bottom of the browser. This script works in IE4+, NS4, and NS6+.

Demo: Move your mouse over the below links:

 

Active-X.com


Directions: Developer's View

Step 1: Add the following to the HEAD section of your page:

Select All

Step 2: Add the below to the end of your BODY section, outside any other tags:

Select All

Step 3: You are now ready to attach a bottom-slide tooltip to any tag that supports onMouseover, such as <A>. Below contains 2 variations of code you add inside the tag in question, plus an example.

Add the below to the BODY of your page to play around with the possibilities:

Select All

Customizing the script

This script requires editing in two places:

1) Edit code of Step 1 to specify the tooltip descriptions
2) Then in the code of Step 3, enter the array element containing the desired tooltip into each onMouseover code (ie: description[0], description [1] etc).

Enjoy!