jQuery: tips with jquery.balloon.js

Tweet

In this short article I would like to share a jQuery plug in I found a few days ago.

Recently I have read various articles about web sites' usability and the idea of much more user friendly interfaces for web sites is really getting stronger and needed for all web developers. I've always thought that tool tips are really important, because they help the user to understand what to do and how to do it. Specifically in web applications, but web sites are the same, tool tips should be always considered important. It's not a mystery... even simple alternative text for an image should be always coded. People simply forget about it (even big web sites, like online magazines where if you mouse over an image you won't get any additional info!), but that is really a big mistake.

jquery.balloon.js is a small plug in (11kb) conceived to create wonderful balloon type tips for any element of a web page. The plug in doesn't use any image and it can be styled with css. Basic usage is very simple, but for those of you that needs a little bit of customisation there are very interesting options available. In the demo page, we can see it in action and I must say I was impressed by the overall final effect.

By changing the default options values, you can have different tool tips; starting from the position of the balloon, its content, size, persistence, duration, animation type and, last but not least, the use of ajax to get the content. The latter feature really impressed me, because I already have thought about different situations where the plug in might be used.

Happy coding to all of you!