i am dustin diaz

a JavaScriptr...

boosh.

don't worry about it.

Sweet Bubbles?

If there's one thing that annoys me the most, it's tooltips generated by JavaScript that follow you. Just recently doing my stroll on del.icio.us/popular/javascript I came across a cute little thing that does unobtrusive tooltips. Anticipating the big ooh aah I was hoping, just hoping, that maybe this one won't do that thing where the tooltip stays attached to my cursor position. But then it happened, and I was sadly disappointed. FYI I'm talking about the new Bubble Tooltips from web-graphics. If we were to look at the default behavior of a tooltip generated by a browser like Internet Explorer or Mozilla Firefox, we would be able to tell that the tooltip appears after about one or two seconds, then remains in its position until you mouseout of your element that fired the tooltip. When I was developing Sweet Titles I was keeping these two main things in mind. But one thing that I particularly was going for was to separate our CSS from the JavaScript - which ultimately gives the developer the power of customizing their own tooltip. In fact, if you wanted to, you could add some pretty little bubble graphic to Sweet Titles by simplying applying a background image to the wrapping div#toolTip element not to mention its containing <p> element for extra imagery. Bubble Tooltips does this too, which increases its credibility. However, needless to say, I really just wanted to call it out. I don't mean to be a downer or take away any of their thunder, but it pulled my interest immediately when I saw it topping the JavaScript category. Thus any script that's able to top the charts deserves its proper review and scrutiny (believe me - I've received some as well)

The JavaScript

Aside from the aesthetics and imagery, which was actually kind of neat (who doesn't like a bubble), this wouldn't be any fun without taking a look at the JavaScript. As we can see, the Bubble Tooltip JavaScript takes a functional approach toward programming. Take note that there are eight functions sitting in this document. Four of which use poor names like CreateEl(), AddCss(), Locate(), and Prepare() when writing functional-based scripts. The problem is that with these functions being global, they are more likely to conflict with existing scripts that may already have a home on your web pages... especially with a name like Prepare.

Where Sweet Titles prevails

Sweet Titles takes the OO approach to programming. Go ahead and take a peak at the Sweet Titles JS file and you'll notice that the entire library is wrapped in an object literal called toolTipLib. Therefore any of its methods are now separate from global tyranny - or rather - libel to conflict with other functions.

Overall

If you're going to use the Bubble Tooltips on your website, beware that it's more likely to cause problems. Beyond that, like I mentioned previously, it goes against two default behaviors that users are more likely to expect. Having a giant bubble follow around my cursor isn't something I think I'd enjoy after a while. The second usability behavior I don't like is its immediacy. Having the tooltip popup right away may cause problems when a user is scrolling through hundreds of links on a page, mainly just being annoying.

With everything being said, I do, in fact, hold a bias toward my own Sweet Titles because I feel it solves all the problems I mentioned here. But hey, the choice is yours ;). Download whacha want!

this is who i am

Hi, my name is Dustin Diaz and I'm an Engineer @ObviousCorp. Previously @Twitter, @Google, and @Yahoo, author of Strobist® Info co-author of JavaScript Design Patterns, co-creator of the Ender JavaScript Framework, a Photographer, and an amateur Mixologist. This is my website. Welcome!

On this site I write about JavaScript. You can also follow along with my open-source work on Github.

This site is optimized and works best in Microsoft Internet Explorer 6.