ineedtutorials.com

Coda is a new web development tool for the Mac – and it’s popular amongst designers and developers. Now, we can have a fancy popup bubble tooltips with jQuery. Remy Sharp from jQueryforDesigners has showed us how to re-create their popup bubble shown when you mouse over the download image. In essence the effect is just a simple combination of effect.

Code style bubble

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

1. Markup that assumes that JavaScript is disabled. It would be fair to say that the popup would be hidden from the CSS.
2. The hidden popup, correctly styled for when we make it appear.
3. jQuery to animate the puff effect on mouseover and mouseout.

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.

Link: http://jqueryfordesigners.com/coda-popup-bubbles/