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!
January 28th, 2006 at 5:06 pm
I personally don’t mind tooltips following me around, especially Particletree’s, which is probably one of my favorte tooltips. It’s simple enough that having the tooltip follow your mouse doesn’t cause too much distraction and comes out looking cool.
I’m not a huge fan of bubbles, but those bubbles aren’t too bad. I do like how Sweet Titles fades in though, which neither Bubble Tooltips or Particletree’s do.
January 28th, 2006 at 6:06 pm
“a giant bubble”
Aint it a text balloon??
January 29th, 2006 at 7:20 am
I agree with you dustin, as far as the code goes, sweet titles is vastly superior. I do think it takes too long for the sweet titles to fade in though, and some users might miss this functionality. can you customize the fade in time?
on another note, are you going to update sweet titles to use as an extension of the prototype library?
January 29th, 2006 at 10:00 am
I think 500 ms or 1/2 sec is rather good *not too slow, or to fast*
Noteworthy: not every browser/machine is as fast? Try 250 *for lightning fast*
tID = setTimeout("toolTipLib.tipShow()",500)January 29th, 2006 at 11:28 am
As Jon said, the Sweet Titles code appears tighter & more sensible. But unlike Dustin, I have to say I’m not so strongly opposed to the bubble following my cursor.
I’m in the process of building a site for older educators who will greatly benefit from ‘tips’ on rollover because it will aid them in explaining the links. A lot of the links will be longer phrases within text, and the longer the tip/bubble stays visible, the longer it will give them to read the description, and hopefully, to feel encouraged to follow the links. It’s pure speculation at this point, but I think the nagging reminder of the tips following their cursor will help guide them better.
For general use with more web-savvy readers, though, I’ll stick with Sweet Titles.
January 29th, 2006 at 11:34 am
Jon, one thing I wanted to stay away from was using Prototype to power such a small task. But I’ve thought about making a separate version for folks already using prototype (since I’m taking full advantage of prototype in other places)
January 29th, 2006 at 11:41 am
Thanks Dustin, looking forward to the new version.
Another major problem with “sour bubbles” is that if the link is close to the right edge of the browser window, the bubble gets cut off. It seems as if you detect for this scenario in sweet titles and flip the title to the left of the link. Very nice.
January 29th, 2006 at 1:21 pm
Isn’ that already built in?
January 29th, 2006 at 4:19 pm
[...] 6;Bubble Tips’. Dustin Diaz, creator of the excellent ‘Sweet Titles’ is not crazy about the source code or the way the titles follow your cursor. I’d acknowledge DiazR [...]
January 29th, 2006 at 6:28 pm
Jeremy Keith’s book DOM Scripting has received nothing but praise, yet I don’t see an OO-oriented line of code anywhere in it.
Why? Because of possible naming conflicts? Rename your functions or better yet, wrap them in an object literal. Problem solved.
Dustin, you’ve only recently started using object literal notation, is it really fair to pick on other code that isn’t written as such? Seems a little elitist to me.
January 29th, 2006 at 10:28 pm
Elitist? Or better? And I’m not picking on anyone here… just merely showing the drawbacks of functional programming.
January 29th, 2006 at 10:33 pm
I think you should do a re-write, for ultimate annoyance, and just have giant bubbles appear as soon as the page loads, with little X’s to close each one. You could even add a timer to make them re-appear. It’d be just like the old whach-a-mole game at Chuck E. Cheeze’s.
Seriously though, here’s the real reason I’m commenting. I’m not sure if you care about Opera. I don’t give it much thought, but here is what JavaScript tooltips (all, not just your’s) look when using Opera, because of it’s native URL tooltip…
http://host.sonspring.com/files/opera_tooltip.gif
January 29th, 2006 at 11:10 pm
Yea Nathan, I knew that about Opera since the beginning. Luckily the Opera user base is so small… I just don’t feel really bad.
Also Justin, I’ve only been writing (real) JavaScript for about a year. Think about the stuff that Stuart and Dunstan wrote originally with NICE titles… and that was three years ago. That nearly kicks both our asses. I originally picked up Object notation from Stuarts book from Sitepoint…ironically that’s when I really started getting into JavaScript.
What I’m saying about this Bubble Tooltip thing is that someone most likely didn’t do their research before getting into the tooltip biz (ok, that’s the stupidest thing i’ve said this year)
January 29th, 2006 at 11:19 pm
I’m all for better design when it comes to Javascript and understand what you’re getting at, but if you really want to critique the code I think we should dig a little deeper than what wraps the functions (which doesn’t make it more/less procedural).
I like it because it does method sniffing, but then again they’re using old school event attacing and don’t check for null references properly.
Applying object literal notation would take a few minutes, but rewriting to use safer Javascript would be a chore.
Nathan,
That sounds like a problem with Opera for breaking from the browser standard, but then again it just goes to show the side effects of trying to override expected browser behaviors; even when the end result is more pleasant (in most browsers).
January 29th, 2006 at 11:25 pm
I should add that by this:
> it just goes to show the side effects of trying to override expected browser behaviors
I am talking about behaviors that don’t have a standard (such as HTML 4.0 Strict or CSS2) to [try] and adhere to.
January 30th, 2006 at 1:30 am
Stuart Langridge rewrote his nice titles script in 2005 to do just that. Is it not so that the prototype.js from http://script.aculo.us/ is full of object literal notation, it’s derivates like moo.fx , etc … are all written like that. JSON, prototype, etc … these are all efforts to take JS further. Maybe you could call it innovation that leads us to good coding practises. The bubble tooltip is a sort of *catchy* name and then every blog shouts thy name. If I look at the prototype.js for instance I see a lot of coding that keeps on being improved and debugged by a whole team.
February 8th, 2006 at 6:41 pm
Regarding the tooltip following you around, Walter Zorn (http://www.walterzorn.com) has a Javascript tooltip library (http://www.walterzorn.com/tooltip/tooltip_e.htm) that has a “sticky” property, the tooltip will stick in place and will not go away till you click somewhere else or mouse over another link. I have not gotten into his code, but maybe that’s what you are looking.
February 26th, 2006 at 3:58 pm
Interesting that the Walter Zorn tooltips prevent Opera from displaying its in-built tips.
Javascript’s not my thing, but I’ll see if I can figure out how and add it to my sweet titles script.
January 10th, 2007 at 12:26 am
[...] http://www.dustindiaz.com/sweet-bubbles/ [...]
June 29th, 2007 at 8:29 pm
Has anyone used WZ Tooltip? http://www.walterzorn.com/tooltip/tooltip_e.htm
Can any anyone compare Sweet Tiles with Wz Tooltip and tell me which one is better. Currently what i found out is that wz tooltip requires ‘ to be entered as \’ in the comment that pops up in the tooltip. However WZ seems more customizable than Sweet Titles. Any agrees, disagrees, any other factors?