Coda Popup Bubbles

Visit website
Coda Popup Bubbles Visit
A jQuery Coda ‘puff’ popup bubble

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.

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.

App submitted Thu 24 Apr '08
Tags script

Related apps


Comments