Coda Popup Bubbles

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.

Earlier: Slider Gallery
Next: Image Cross Fade Transition

Tutorial
Try Demo
View Code
291 Comments

Play QuickTime version Right click to download
Play Flash version Right click to download

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.

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="/img/spacer.gif">



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 br. Try running the demo in it's own window.
                    
                
                
                    Source Code
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Coda Bubble Example</title>
    <style type="text/css" media="screen">
    <!--
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 10px;
        }
        
        h1 {
            margin: 14px 0;
            font-family: 'Trebuchet MS', Helvetica;
        }
        
        p {
            margin: 14px 0;
            font-family: 'Trebuchet MS', Helvetica;
        }
        
        .bubbleInfo {
            position: relative;
            top: 150px;
            left: 100px;
            px;
        }
        .trigger {
            position: absolute;
        }
     
        /* Bubble pop-up */

        .popup {
        	position: absolute;
        	display: none;
        	z-index: 50;
        	border-collapse: collapse;
        }

        .popup td.corner {
        	px;
        	px;
        }

        .popup td#topleft { "allcomments">
                    Comments
                      
  
  « Previous
1
...
6
7
8 
  
  
    
    
	  karthik On 8th October 2009 at 09:10
	   
	  Thanks a lot for the post. It was very useful. My I know how do you  approximate it’s position of the trigger element.
  
	  FloiT On 11th October 2009 at 23:10
	   
	  great tutorial! 
But… what about doing a WordPress plugin of it? :D
It would be great if you could use this effect in every link…

Anyway, thanks a lot
  
	  Chrispy On 23rd October 2009 at 18:10
	   
	  Hi, was wondering if anyone had an idea to fix this. I understand the instructions to switch the animation from up to down (top: ‘- to top: ‘+) but unfortunately it just moved the bubble down and did not flip it like I had hoped. But my real questions is..is it possible to do both up and down? For instance, I have two rows of images of two each. I want the top row to animate up and the bottom row to animate down (so the bubbles don’t block the above images). I tried adding the changes and making two vars (triggerUp and triggerDown) and two functions calling these, but no luck.

Is there a straightforward way of doing this? TIA!
  
	  Vin On 28th October 2009 at 02:10
	   
	  Do you think its possible to include form elements (such as text fields, check boxes, and submit buttons) inside a coda bubble itself?
  
	  "Cowboy" Ben Alman On 5th November 2009 at 03:11
	   
	  Remy, just a heads’ up.. I’ve created a plugin called jQuery doTimeout that makes handling the timers for this kind of thing very easy (I know they’re already pretty easy, but I think it’s even easier). Just take a look at the “hover intent” example(s).

benalman.com/projects/jquery-dotimeout-plugin/


Ben

  
	  uhleeka On 12th November 2009 at 03:11
	   
	  Thanks for the tutorial!  After implementing your code and being frustrated by IE’s inability to handle png’s with opacity, I wrote a jQuery plugin that includes a few more features.  

www.uhleeka.com/blog/2009/11/bubbletip/
  
	  Joseph Le Brech On 24th November 2009 at 11:11
	   
	  Hey, I have been trying to use coda bubble within a dynamic webpage where the items are loaded at runtime.

So I have wrapped it as a jQuery plugin.

Like this;



$(function () {
    jQuery.fn.bubbleInfo = function(){
        this.each(function(){
                       var distance = 10;
            var time = 250;
            var hideDelay = 500;


...

                    return false;

        });

});

}


});

  
	  vimal On 25th November 2009 at 09:11
	   
	  hi any one help, how to popup it when onClick it not in mouseover
  
	  Nathan On 26th November 2009 at 09:11
	   
	  Thanks for this tutorial! I’ve always wanted to learn how to make tooltips that you can click on or mouse over.
  
	  lara On 27th November 2009 at 11:11
	   
	  Hi,

Its an excellent coding, but I have a trouble could you help me resolve it. 
Check this page www.auditiongigs.com You see a featured talent section in the right menu. If you hover over the images you will see a popup. The last popup comes up fine. The other two popups hide behind the image.  I am not sure how to make it work
  
	  Carl On 22nd December 2009 at 16:12
	   
	  I having a problem with the display:none on the .popup class, when removed the content displays fine (div layout content). However when I put it back in the popup displays, but the content in is missing any ideas?
  
	  naresh On 23rd December 2009 at 13:12
	   
	  Thanks great Tutorial.
A question, How can we do it for multiple tutorial. I willl appreciate any help from your side

Thanks U
  
	  emma On 29th December 2009 at 16:12
	   
	  Thanks for the tutorial, such a beautiful effect! 
However I have one question. I made my bubble pop up on top of my link instead of above (as seen here), it looks great but the link is no longer clickable as the bubble completely covers it. How can I keep my link useable but still display the bubble on top?
  
	  Geoff On 10th January 2010 at 00:01
	   
	  Purely out of interest, i took what you have here and developed a jQuery plugin. I am having major issues with regards to multiple instances on the same page. Often, if 2 elements are right next to each other, the mouseenter event on the second element can trigger before or too close in time to the mouseout event on the previous element. This causes problems with the show and beingshown variables and leads to the tooltip not showing at all.
  
	  Yam On 20th January 2010 at 00:01
	   
	  Love it. 
Thanks.

1 question though

How do I move the arrow to the top?
  
	  Ravi On 22nd January 2010 at 13:01
	   
	  Any example for mouseover popup
  

  
  « Previous
1
...
6
7
8

		    
      		
      		Comments are now closed.

jQuery for Designers

Coda Popup Bubbles

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

karthik On 8th October 2009 at 09:10

FloiT On 11th October 2009 at 23:10

Chrispy On 23rd October 2009 at 18:10

Vin On 28th October 2009 at 02:10

"Cowboy" Ben Alman On 5th November 2009 at 03:11

uhleeka On 12th November 2009 at 03:11

Joseph Le Brech On 24th November 2009 at 11:11

vimal On 25th November 2009 at 09:11

Nathan On 26th November 2009 at 09:11

lara On 27th November 2009 at 11:11

Carl On 22nd December 2009 at 16:12

naresh On 23rd December 2009 at 13:12

emma On 29th December 2009 at 16:12

Geoff On 10th January 2010 at 00:01

Yam On 20th January 2010 at 00:01

Ravi On 22nd January 2010 at 13:01

About J4D

Feeds

Resources

What's Popular?