Posted on 3rd March 2008 —Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design.

In particular, Jorge Mesa writes to ask how to re-create their ‘puff’ popup bubble shown when you mouse over the download image.

In essence the effect is just a simple combination of effect, but there’s a few nuances to be wary of.

How to Solve the Problem

To create the puff popup bubble effect, we need the following:

Markup that assumes that JavaScript is disabled. It would be fair to say that the popup would be hidden from the CSS.

The hidden popup, correctly styled for when we make it appear.

jQuery to animate the puff effect on mouseover and mouseout.

The biggest trick to be wary of is: when you move the mouse over the popup, this triggers a mouseout on the image used to trigger the popup being shown. I’ll explain (carefully) how to make sure the effect doesn’t fail in this situation.

I’ve provided a screencast to walk through how create this functionality. Details on how and what I used can be found below.

CSS

There’s very little to the minimum required CSS. Of course, how you markup your bubble will change this, and the screencast uses the version from the Coda web site, so there’s a considerable amount of CSS to style the bubble.

jQuery

To create the effect, we need to run the following animation on the popup element:

Mouse Over

On mouseover: reset the position of the popup (required because we’re floating upwards as we puff away).

Animate the popup’s opacity from 0 to 1 and move it’s CSS top position by negative 10px (to move upwards).

If the mouseover is fired again, and we’re still animating – ignore.

If the mouseover is fired again, and the popup is already visible – ignore.

Mouse Out

Set a timer to trigger the popup hide function (this prevents accidentally moving out of the ‘active’ area).

If a timer is set (to hide), reset the timer (thus only allowing one hide function to fire).

Once timed out, animiate the popup’s opacity from 1 to 0 and move it’s CSS top position by negative 10px (to float upwards away).

Set the appropriate flags to indicate the popup is now hidden.

The ‘Trick’

There was one piece of tricky logic that initially I couldn’t work out. Each time I moved the mouse over the popup, it would fire a mouseout on the trigger element – which would hide the popup. This is an undesirable bug.

There may be a another way around this, and from what I can tell, the Coda site developers didn’t solve it this way – but here’s the solution:

You need to clear the timer set in the mouseout (point 1 above) in the mouseover. This completely solves the problem.

Complete Source Code

Here’s the complete source code for the effect, including comments throughout the code to explain what each block is doing.

Taking it Further

This effect could be perfected by changing the initial reset (popup.css()) code to read from the trigger element and approximate it’s position. In my example, I’ve hardcoded it because I only have one on the page – but you may want to use this effect several times across your page.

You should follow me on Twitter hereI tweet about jQuery amongst the usual tweet-splurges!