Cool DHTML Tooltip II
Description: Fancy tooltips with an "arrow" pointer are commonly found in desktop applications. Well, now you can add a similarly looking tooltip to your webpage! Similar in function to Cool DHTML Tooltip, the script works in IE4+, NS6+, and Opera 7+. Note that the pointer image disappears if the tooltip is too close to the edges of the browser window.
Cool!
Demo (move your mouse over):
Directions:
Step 1: Insert the following stylesheet into the <head> section of your page:
Step 2: Insert the below code into the <body> section of your page, outside any other tags, especially relatively or absolutely positioned elements:
Step 3: The script uses a pointer image. Download the below:
(right click image, and select "Save As").
Note that you can use your own custom image in place of the above if you wish.
Step 4: Finally, add the following inside any link or element that will contain a tooltip:
onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials', 300)";
onMouseout="hideddrivetip()"
Configuration Notes
1) In the code of Step 4 above, it references ddrivetip(), which is what you'll need to use to enter the tooltip text for each corresponding link/element:
ddrivetip('TEXT TO DISPLAY', OPTIONAL TIP WIDTH)
The last two parameters are optional, and not specifying them causes the script to default to the settings within your CSS file. With that in mind, here are a few actual usage examples:
<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";
onMouseout="hideddrivetip()">Search Engine</a>
<div onMouseover="ddrivetip('Yahoo\'s Site', 250)";
onMouseout="hideddrivetip()">This is a DIV. This is a DIV.</div>
Important: If your tooltip description contains apostrophes ('), be sure to backslash them first, as illustrated in the last example ("Yahoo\'s Site"), or an error will occur.
2) To customize the general look of the tooltip (ie: default width, background color), edit the stylesheet of Step 1.
3) Inside the script of Step 2, there contains a few variables for specifying the offsets of the tooltip. Most notably, the variable:
var offsetdivfrompointerY=14
lets you specify the vertical offset of the tooltip DIV relative to the pointer image. This variable is useful if you use your own custom pointer image. By setting this variable to height_of_pointer_image-1, the two parts should fit snugly together.