Quickly Creating Javascript Tooltips
Filed under CSS, HTML, Javascript
I’ve noticed that a lot of sites do not use tooltips as much as they should. There are many places on a site where tooltips would really be nice. One example of using them correctly is TheSixtyOne. They use a nice tooltip when you are about to bump a song up. It quickly lets you know how many points it will cost and how many times you have bumped it. This post will hopefully inspire at least one of you to use tooltips more often.
The solution I have decided to use is UniTip from Unit Interactive. I believe they have the best solution to quickly setting up tooltips. Download the zip they provide and we should be ready to go.
First, the base html:
<html>
<head>
<title>Example tooltip</title>
<script type="text/javascript" src="js/unitip.js"></script>
<link href="css/unitip.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<img src="awesomepic.jpg" alt="awesome" title="This pic is awesome" class="tooltip"/>
</body>
</html>
Open up unitip.js and find the lines containing:
var uniTipTag = "a,img";
var uniTipClass = "TipEx";
Change this to:
var uniTipTag = "img";
var uniTipClass = "tooltip";
Now just run the html file and you should instantly have tooltips. If something doesn’t work, make sure your path to the css file and images are correct. In addition, it is suggested to use a PNG fix file for IE6. I recommend Unit PNG Fix. It’s super easy to use and works like a charm.
Please keep in mind that tooltips are really designed for items that really need them, extensive use is annoying. A common use is creating help tips for users completing a complex form. If there is some form of information a user could not understand, it is advisable to use a tooltip on the input box or the label.
Leave a Reply