Coda Popup Bubbles

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.

Coda Bubble

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.

Watch the coda bubble screencast (alternative flash version)

(QuickTime version is approx. 23Mb, flash version is streaming)

View the demo and source code used in the screencast

HTML Markup

For the purpose of reusability, I’ve wrapped my ‘target’ and ‘popup’ in a div. The target is the element which the user must mouseover to show the popup.

<div class="bubbleInfo">
  <img class="trigger" src="http://mysite.com/path/to/image.png" />
  <div class="popup">
    <!-- your information content -->
  </div>
</div>

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.

The minimum I recommend for the example is:

.bubbleInfo {
    position: relative;
}

.popup {
    position: absolute;
    display: none; /* keeps the popup hidden if no JS available */
}

This way we can absolutely position the popup against the trigger.

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.

$(function () {
  $('.bubbleInfo').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 500;

    var hideDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;
    
    var trigger = $('.trigger', this);
    var popup = $('.popup', this).css('opacity', 0);

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseover(function () {
      // stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // don't trigger the animation again if we're being shown, or already visible
      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;

        // reset position of popup box
        popup.css({
          top: -100,
          left: -33,
          display: 'block' // brings the popup back in to view
        })

        // (we're using chaining on the popup) now animate it's opacity and position
        .animate({
          top: '-=' + distance + 'px',
          opacity: 1
        }, time, 'swing', function() {
          // once the animation is complete, set the tracker variables
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(function () {
      // reset the timer if we get fired again - avoids double animations
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      
      // store the timer so that it can be cleared in the mouseover if required
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        popup.animate({
          top: '-=' + distance + 'px',
          opacity: 0
        }, time, 'swing', function () {
          // once the animate is complete, set the tracker variables
          shown = false;
          // hide the popup entirely after the effect (opacity alone doesn't do the job)
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });
});

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 here I tweet about jQuery amongst the usual tweet-splurges!

Related screencasts

Automatic Infinite Carousel Following on from the infinite carousel, there have been a...
Coda Slider Effect Although Panic didn’t really invent the effect, the sliding panels...
Image Cross Fade Transition A frequent query and request I receive (and have myself)...
jQuery look: Tim Van Damme Jonathan Diba writes to ask how the effects are achieve...
BBC Radio 1 Zoom Tabs Gareth Edward asked how to achieve the effect on the...

Demo

If you find this demo doesn't work as expected, it's possibly due to the demo running from within an iframe. Try running the demo in it's own window.

Source Code

Comments

Doc Holliday On 3rd March 2008 at 17:03

Great tutorial! The timeout, cleartimeout stuff has always confused me a bit, and this info will come in handy if I ever need to make a series of drop downs for navigation!
Bryan Migliorisi On 3rd March 2008 at 19:03

Very nice tutorial. I am definitely going to put this to use on some sites of mine. By the way, spelling mistake - “Taking it Future” - I think it should say “Further”
Remy On 3rd March 2008 at 23:03

@Bryan - cheers for the correction.
Andreas On 4th March 2008 at 00:03

Great tut. Always learn something new from you.
James Carr On 4th March 2008 at 03:03

Thanks a lot for this tutorial! ;)
Livingston Samuel On 4th March 2008 at 10:03

Wonderful effect!

I wish that the transparency works in IE. Please provide a solution for this.
Remy On 4th March 2008 at 11:03

Re: the transparency in IE.

This is only a problem due to the images used from Coda’s web site. I’m sure it’s something to do with the way they were created. If you plan to use pngs on your own solution, I recommend using the pngFix jQuery plugin as it handles inline images and background transparency.
Georgi On 6th March 2008 at 14:03

would have been way easier if you used :animated and :visible instead of this beingShown stuff
Remy On 6th March 2008 at 17:03

@Georgi - I wouldn’t have said it makes it much easier, because you need to be careful to flip the display: none style again on once the animation is complete, since opacity: 0 doesn’t doesn’t flag as :not(:visible) (note that the code above does do this).

None the less, it does away with two variables - which I like.

If anyone is interested, you can strip away the beingShown and shown variable and replace:
```
if (beingShown || shown) {
```
with:
```
if (popup.is(':animated,:visible')) {
```
To make use of jQuery’s custom selectors.

Cheers Georgi.
uri On 13th March 2008 at 04:03

I would like to follow your suggestions about taking this one step further but not sure how to proceed as easy as it might be since this is all very new to me. Can you please provide sample since I would love to use this on several times across one page? Thanks Uri
Jon On 2nd April 2008 at 19:04

Isn’t that is easier to do with Web Designer Wall’s technique: http://www.webdesignerwall.com/demo/jquery/animated-hover2.html
Luke On 9th April 2008 at 04:04

Wow, what a great tutorial. Thanks for taking the time to do this.
Remy On 11th April 2008 at 08:04

@Jon - you’re almost right. Web Designer Wall’s technique is easy - but it doesn’t replicate the effect the way I wanted to (also - their tutorial came out at the same time!).

It’s definitely less code to have it appear and disappear to the same spot. To create the “puff” effect, it needs to go up, and up. Thanks for the link though :-)
Steve On 14th April 2008 at 00:04

Thanks for the great tutorial! The only problem I see is that anytime after you have rolled over it for the first time, when you mouse over the area where your pop-up will appear, it activates it. This is true on your demo as well. Is there anyway to make it only pop-up when you mouse over just the link? Thanks!
Remy On 14th April 2008 at 07:04

@Steve - thanks for pointing that out. I had updated the code in the tutorial to set the popup.css('display', 'none'); in the callback, but I didn’t in the example. That’s now been updated, and doesn’t trigger when you hover over where the popup used to be.
Steve On 14th April 2008 at 12:04

Thanks for the quick reply! That worked great. One more thing, any way to prevent the text flicker as the bubble is being activated? Thanks again.
agencja modelek On 16th April 2008 at 13:04

Its great tut. Im going to buy Mac and cant stand to use Coda. thx for this post, greetings, agencja modelek
carla On 16th April 2008 at 23:04

“you may want to use this effect several times across your page.”

Does anyone know how to do this? I tried to hack something together, but with my limited skills it came out a mess. Can anyone share some code where they were able to do this effect several times across one page? Much appreciate!

Great tutorial. Thanks for posting it.
Remy On 16th April 2008 at 23:04

@Carla - I posted it as a plugin that can be used on with multiple bubbles:

http://plugins.jquery.com/project/bubble-puff

You need to point the selector at a div that contains the trigger element and the actual popup. Let me know how you get on.
Nathan Pitman On 16th April 2008 at 23:04

@Remy - Any chance you could post a small example snippet to show how to use the revised plug-in code? :)
Oli Sindri On 18th April 2008 at 10:04

Nice tutorial.

Can the containing div contain more than one trigger, each of which triggers a popup occupying the same space?

To explain:

http://www.olisindri.com/myndir/2popups.gif

The yellow trigger being the active / moused over one.
fedmich On 20th April 2008 at 20:04

Wow, I always loved and really wants to immitates coda’s bubble/slide etc. Its what inspired me on my portfolio, http://fedmich.com/works/
Manolo On 26th April 2008 at 20:04

hi, i translate your code to prototype/script.aculo.us if anyone want it just write me a mail!
Derive Host On 30th April 2008 at 14:04

Wonderful Tutorial.

Regards Team Derive Host
Franck On 3rd May 2008 at 17:05

Hi, great tutorial Remy.

I’m trying to center the bubble according to the width of the trigger. Do you have an idea how I could do this? Thanks