First things first, download the zip file. Next, add the following code to your page header [make sure the paths reflect your folder structure]:
<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:
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.
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 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 uniTipY = 15; - Vertical offset from the cursor.
- .ZIP Size:
- ≈ 6kb
- 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.
Once again updated with the latest and greatest Unit PNG Fix.
Updated, yet again, with the latest Unit PNG Fix.
Updated, again, with the latest Unit PNG Fix.
Updated with the latest Unit PNG Fix.
Fixed IE6 filter/positioning bug and scroll bar jump in IE. Also, changed how the title attribute works to pass validation and make it more screen reader friendly. Thanks to suggestions from Mr. Kolotilin, Pablo Impallari, and Tom Hooper.
Repackaged with the latest version of Unit PNG Fix.
Fixed Safari and then Firefox scrolling issues. Thanks to Artem Nezvigin and Josh Turner.