Updated 10.26.09 — Find out what’s new in the UniTip Docs.

Rollover links below.DEMO |

Roll on over.Roll on over.

DEPLOYMENT |

First things first, download the zip file. Next, add the following code to your page header [make sure the paths reflect your folder structure]:

<script type="text/javascript" src="unitip.js"></script>

<link href="css/unitip.css" rel="stylesheet" type="text/css" />

UniTip uses transparent pngs by default, so make sure you deploy the Unit PNG fix, as well. Then add “unitip.css” to your css folder.

You can use the files provided in this zip’s images folder (referenced in the above code), or use your own images. Notice the image structure:

TipPoint.png

TipPoint.png

This is the pointy part. The uniTip uses background position to serve up the correct part of this image depending on where the point should be eminating.

TipCap.png

TipCap.png

This is the rounded cap. The uniTip uses background position to serve up the correct part of this image depending on if the cap is top or bottom. Feel free to use your own images, but just follow this structure to ensure that the tip looks correct when adjusting to the browser edges.

Next open up unitip.js, and at the top, add the info needed. The first set of variables pertains to what the tooltip will appear on:

var uniTipTag = "a,img"; - Defines the tags that the tooltip will be applied to. Separate with a comma and no spaces.

var uniTipClass = "TipEx"; - Defines the classes that the tooltip will be applied to. If left blank, the tooltip will apply to all instances of the tags from above.

The second set of variables defines the tool tip’s offset from the cursor:

var uniTipX = 0; - Horizontal offset from the cursor.

var uniTipY = 15; - Vertical offset from the cursor.
Download Now
Updated:
10.26.09
.ZIP Size:
≈ 6kb
Browsers:
IE 6+, FF2+, Safari, Opera

Now, add the tooltip content you want for each element in the title attribute for links and the alt attribute for images. Note that when using HTML in the tooltip content, page readers will have a difficult time diciphering it. View source on this page to see examples. Lastly, make sure that the image paths you have designated have all the correct images, and you should be done.

DOCS |

Improvements, Bugs, Complaints? We’d like to hear from you at .