dawnerd » usability http://dawnerd.com Just another WordPress site Fri, 13 Aug 2010 18:20:31 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Quickly Creating Javascript Tooltips http://dawnerd.com/post/53_quickly-creating-javascript-tooltips/ http://dawnerd.com/post/53_quickly-creating-javascript-tooltips/#comments Sun, 24 Aug 2008 11:05:11 +0000 Troy Whiteley http://dawnerd.com/?p=53 Continue reading →]]> 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:



  

    

  
  
    awesome

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.

]]> http://dawnerd.com/post/53_quickly-creating-javascript-tooltips/feed/ 0