Beautiful balloons

Bubbles and balloons are the order of the day.

Over at Web Graphics, Alessandro Fulciniti has written a little script to show bubble tooltips when you mouse over a link. The functionality is similar to Stuart’s nice titles. You can see it in action and dissect the lightweight JavaScript code.

You can see more hovering balloons over at the website of Adriaan Tijsseling (Ado for short). He’s the guy who wrote the ecto blogging tool. Look at the little icons at the bottom of each page. There are links to, Flickr, Technorati and Hovering over any of these links displays an info-balloon with the latest links from the website in question. Ado has written up the process and shows the code he wrote.

As well as the recurring balloon/bubble theme, these scripts have a lot in common. They both attach event handlers unobtrusively. They both use DOM methods to generate markup (rather than using, say, document.write). They both separate presentation (in a CSS file) from behaviour (in a JavaScript file). The functionality of both scripts degrades gracefully.

They’re both really nice examples of DOM Scripting. In fact, the only real dilemma raised by these scripts is what to call the things that appear when you hover over the links: are they bubbles or are they balloons?

Posted by Jeremy on Sunday, February 5th, 2006 at 2:45am


This update is worthwile, an other coding approach though.

# Posted by Johan on Wednesday, February 8th, 2006 at 11:20pm

Hey Johan, thanks for the mention :)

And btw, I would just call them tooltips. Isn’t that what they’re called?

# Posted by Dustin Diaz on Thursday, February 9th, 2006 at 1:13am

Sorry. Comments are closed.

February 2006

Recommended Reading

XML Subscribe

Grab the RSS feed for this blog.

JavaScript API

Grab the RSS feed of comments for this entry.