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

ilz On 25th June 2009 at 17:06

Is there a way to write a code to just not show the pop-ups if the browser is IE?
Chris On 10th July 2009 at 17:07

I noticed that the the bubbles were gifs and not png images. Also I was wondering why is it that my popup sites behind the buttonArea when I use your version of the coda bubble Brendan.

Thanks,

Chris
Carlo Tasca On 12th July 2009 at 13:07

Thanks for the great tutorial…

I have created a plugin that allows for multiple bubbles and has options to use GIF images instead of PNGs or to just disable all bubbles in IE.

Plugin documentation and demo at http://www.myjquery.co.uk/docs/x/plugins/coda_bubble/coda_bubble.php
Mike On 15th July 2009 at 16:07

The pop up breaks if you hover back over the image while it is fading out. Any way to fix this?
Carlo Tasca On 18th July 2009 at 11:07

@Mike

You mean when quickly moving back over the trigger element while bubble fades away? Maybe try bringing down bubble times and hide delays?
ilz On 18th July 2009 at 23:07

Hey guys,

I used three of these on my recently re-designed personal site. They look great in the latest firefox, opera, safari. Look like garbage in IE, but i’m going to take a look above and hopefully set it up so they are just disabled if a user is running internet explorer..

Check them out and let me know your feedback! http://beantowndesign.com/
DeNiro On 21st July 2009 at 16:07

@Carlos

Wow Bro, great work, your version is amazing. I have six working flawlessly on the same page and in IE. I do have two questions:
1. You included a php script in the folder, what is the purpose of this file?
2. You have two codabubble scripts in the folder. Your instructions say to use “jquery.codabubble.js”, which I am. However, I believe you are using the other file “jquery.codabubble_jso.js” in the demo. What is the difference in the two files?
Carlo Tasca On 22nd July 2009 at 08:07

@DeNiro

Cheers man! The php file does exactly the same… you can simply use the class’ methods to output javascript and html for bubbles. You achieve the same result.

“I believe you are using the other file “jquery.codabubble_jso.js” in the demo…”.

I do, it is just quicker to load (compare both file sizes).

Take care!
DeNiro On 23rd July 2009 at 00:07

@Carlo

That is what I assumed, but I wanted to make sure. You really did go above and beyond with all the files you included.

Thanks Carlo, for all the hard work and fast response.
Webchester On 27th July 2009 at 19:07

It is desired plugin, thanks for a good lesson.
ilz On 28th July 2009 at 20:07

@Carlo.. nice work bro!

When I get a chance I’ll make them work on mine with your method.. (http://beantowndesign.com/) Thanks!
JSD On 1st August 2009 at 17:08

hmmm can we re-write this for jquery 1.3.2?
Carlo Tasca On 3rd August 2009 at 16:08

@JSD

It does work with version 1.3.2. What sort of problem you have?

@ilz

Thanx mate!
Chad On 6th August 2009 at 05:08

@Carlo

Hi, I’m using Opera 9.23 - your bubbles aren’t displaying on your demo page - any ideas?
dirk On 6th August 2009 at 08:08

Anyone already found a solution to fix the ie8 bug ? Transparency get lost when changing opacity, so the Background of png is black in IE8.

JSD On 9th August 2009 at 17:08

@Carlo I got it to work I was being a noob..

@Anyone having problems with the black border in IE. on the other hand for all those who are having issues with IE… this is what I did (after trying many difernet things that didn’t work including the pngFix which breaks the whole thing if the png is a background image, and possitioning/z-index does NOT fix the issue in all cases)… now mind you, this basically makes it so there are two entirely diferent effects in IE and FF. in IE it’s a simple show/hide which I resolve the mousout issue of the bubble disapearing by having it popup 1 or 2px (in my case 5px because my nav bar is 40px tall) optop of the trigger div, this way when you move over to the bubble, it’s still technically inside the div so the hover-out doesn’t get triggered.

Also I changed it a bit so that it looks right in IE6+ and not just IE7+ and FF.

Also mind you this is a drop down box not drop up, so the posX/posY are reflective of that.


    if (jQuery.browser.msie) {
        if(parseInt(jQuery.browser.version) == 6) {
            var posX = -165;
            var posY = 35;
        } else {
            var posX = 185;
            var posY = 35;
        }
        $('.bubble-effect').hover(
            function() {
                $('.nav-bubble-content', this).css({
                    display: 'block',
                    top: posY,
                    left: posX
                });
            },
            function() {
                $('.nav-bubble-content', this).css({
                    display: 'none'
                });
            }
        );
    } else {

    $('.bubble-effect').each(function () {
        var distance = 10;
        var time = 50;
        var hideDelay = 50;
        var posX = 185;
        var posY = 30;

        var hideDelayTimer = null;

        var beingShown = false;
        var shown = false;
        var trigger = $('.bubble-trigger', this);
        var info = $('.nav-bubble-content', this).css('opacity', 0);


        $([trigger.get(0), info.get(0)]).mouseover(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                return;
            } else {
                beingShown = true;
                info.css({
                    top: posY,
                    left: posX,
                    display: 'block'
                }).animate({
                    top: '+=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });
            }
            return false;
        }).mouseout(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.animate({
                    top: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    info.css('display', 'none');
                });

            }, hideDelay);
            return false;
        });
    });
}

Casey Becking On 11th August 2009 at 17:08

Found a very cool fix to be able to use this where ever the mouses position is and not just lock the bubble to absolute.

$([trigger.get(0), info.get(0)]).mouseover(function (e) {
  if (hideDelayTimer) clearTimeout(hideDelayTimer);
  if (beingShown || shown) {
    // don't trigger the animation again
    return;
  } else {

   // reset position of info box
    beingShown = true;
    info.css({
      top: e.pageY,
      left: e.pageX,
      display: 'block'
    }).animate({
      top: '-=' + distance + 'px',
      opacity: 1
    }, time, 'swing', function() {
      beingShown = false;
      shown = true;
    });
}

Mike On 14th August 2009 at 18:08

@Casey How do you get the bubble to position itself correctly? I can’t position it based on where my mouse is. (e.g., if my mouse is at 500,600 the bubble goes 500,600 from where the trigger is rather than just 500,600)
MJ On 16th August 2009 at 04:08

@Casey How exactly do you get that to work? I can’t get the bubble to appear where my mouse is. I think it’s adding the value of pageY and pageX in addition to wherever the mouse is because the bubble is positioned absolutely.
Nick On 25th August 2009 at 23:08

@Carlo,

Hi Carlo,

Great plugin for Jquery, however I’m having a problem with the bubble graphics.

I’m just trying to build a sample page using your example graphics, and I can’t seem to get any of the png’s to load other than the bubble-tail2.png (bubble-1 - 8 won’t display).

Would you have any idea what might cause this? I have fiddled with the relative paths for hours, and no joy.

Any suggestions would be most appreciated.

thanks! -Nick
jordan On 5th September 2009 at 20:09

i have copied all of the code and pasted it accordingly to my site and still nothing. im running this in safari so there shouldnt be a browser issue at all. any clues?

Shahar On 13th September 2009 at 21:09

This seems to work fine for x position of the popup on multiple items

triggerposition = trigger.position();
// The '8' is to deal with padding
popupx = ( triggerposition.left + (((trigger.width()/2) + 8) - (popup.width()/2)));
popup.css({
  top: -45,
  left: popupx,
  display: 'block' // brings the popup back in to view
})

Oh, and thanks for a great tutorial :D

Owen Gunter On 15th September 2009 at 14:09

Hi

Just to let you know there are solutions for the png/ie issue which I have implemented so the transparency now works with IE (looks much better). Thanks for giving me a lead on this.

BTW I used the supersleight jquery plugin.
Tuscaloosa Web Designer On 21st September 2009 at 17:09

I’m falling in love with jQuery. Thank you.
Ricky Mataka On 8th October 2009 at 01:10

Ok… I have tried all options.. I have the bubble working flawlessly but i cant seem to fix the transparency in IE8 .. i have spent like 6 hours trying to do this does anybody have a work around for this in IE8.. i have tried all 7 pages of examples with no luck :(

Thanks Rick

Comments are now closed.

jQuery for Designers

How to Solve the Problem

HTML Markup

CSS

jQuery

Mouse Over

Mouse Out

The ‘Trick’

Complete Source Code

Taking it Further

Related screencasts

Demo

Source Code

Comments

ilz On 25th June 2009 at 17:06

Chris On 10th July 2009 at 17:07

Carlo Tasca On 12th July 2009 at 13:07

Mike On 15th July 2009 at 16:07

Carlo Tasca On 18th July 2009 at 11:07

ilz On 18th July 2009 at 23:07

DeNiro On 21st July 2009 at 16:07

Carlo Tasca On 22nd July 2009 at 08:07

DeNiro On 23rd July 2009 at 00:07

Webchester On 27th July 2009 at 19:07

ilz On 28th July 2009 at 20:07

JSD On 1st August 2009 at 17:08

Carlo Tasca On 3rd August 2009 at 16:08

Chad On 6th August 2009 at 05:08

dirk On 6th August 2009 at 08:08

JSD On 9th August 2009 at 17:08

Casey Becking On 11th August 2009 at 17:08

Mike On 14th August 2009 at 18:08

MJ On 16th August 2009 at 04:08

Nick On 25th August 2009 at 23:08

jordan On 5th September 2009 at 20:09

Shahar On 13th September 2009 at 21:09

Owen Gunter On 15th September 2009 at 14:09

Tuscaloosa Web Designer On 21st September 2009 at 17:09

Ricky Mataka On 8th October 2009 at 01:10

About J4D

Feeds

Resources

What's Popular?