Recreating the Coda Popup Bubble With CSS

Most web designers have visited the Panic website on more than one occasion. People go there to buy their wonderful product, Coda. Others find themselves returning again and again to admire some of the unique design elements on the website. There’s nothing particularly wonderful about their website, but it does feature a few fascinating javascript effects, as well as a clean and elegant design. One of these javscript effects that caught my eye, and many others, is the little tooltip popup bubble.

It functions nicely, and is actually a helpful element to the page.  You could probably find some way in which you could implement something into one of your designs.  jQueryForDesigners did a tutorial awhile back on how to recreate this effect using javascript. I have to say that is was a wonderful tutorial and produced an excellent finished product.  To be honest, everything on jQueryForDesigners is nothing short of excellent.  The thing with this popup bubble is that it doesn’t work with javascript disabled.  If you have important information in here, you probably want a more light-weight and reliable solution.

Luckily, we have CSS to save us. CSS is certainly light weight, and you don’t have to worry about people disabling it.  We can recreate the effect used on the Coda website, without the use of image or javascript.  Before we do though, let’s take a look at what we want to accomplish.

Problems

What we want to create should be completely without images and javascript. This means we’ll have to use some CSS3, and progressive enhancement techniques.
We want to bubble to smoothly transition into visibility when a mouse over event occurs on the download image. We also want the popup to stay visible if the mouse is on the popup itself.

There will be no restrictions on height or width of the popup, because there aren’t any images to define that height or width.

Another plus is, without the external jQuery, javascript, and image files, we save a few http requests that shouldn’t be necessary for such a simple function.

HTML Markup

The markup for this should be similar to the following.

	<div class="bubbleInfo">
		<a href="#">
			<img src="path-to-your-image" alt="download" id="download" />
		</a>
		<div id="dpop" class="popup">
		        <!--INSERT YOUR CONTENT HERE-->
		</div><!--#dpop-->
	</div><!--#bubbleInfo-->

Here we wrapped both the download image, and the popup bubble in a container.  The actual image is a link, but doesn’t have any affect on the popup.  So the two elements inside our wrapper div are completely separate.

When there is a hover event on the wrapper div, that triggers the popup to transition into visibility.

CSS

Unlike with the markup there is a good amount of CSS involved in getting this to work.  Let’s look at what we want to accomplish with the CSS here

• Rounded corners
• Drop shadow
• Transition the location, and the visibility of the actual popup when the hover event occurs
• Graceful degradation in less modern browsers
• Write it with progressive enhancement

If you look at the bubble on the coda website, it slides upwards, and the opacity changes when you hover over.  We can accomplish this by manipulating the top, and opacity values of the popup.

Let’s first style the bubble.

#dpop {
	background:#FFF;
	border:1px solid #a0c7ff;
	display:block;
	left:-30px;
	opacity:0;
	padding:10px;
	position:absolute;
	top:-90px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:rgba(68,68,68,.5) 0px 3px 8px;}

These styles only apply to what the bubble will look like when it is partially visible.  The opacity:0 sets the div to be completely hidden from view.

Later, we will set a duration for the popup to transition into visibility.  It is necessary to define these styles on the hidden popup so we don’t affect the look of the partially visible popup.  Don’t worry, it’ll all make sense soon.

Next, we’ll style the visible bubble.  The only properties we need to change in this example are the opacity and the top value.

.bubbleInfo:hover > #dpop {									background:#FFF;border:1px solid #a0c7ff;display:block;left:-30px;opacity:1;padding:10px;position:absolute;top:-100px;-moz-border-radius:5px;
										-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:rgba(68,68,68,.5) 0px 3px 8px;}

We know that .bubbleInfo is our wrapper div.

But the code we used for our selector may seem a bit strange.  Essentially, it  translates to “When #dpop is a child of .bubbleInfo:hover, apply this styling”.

The trick here is that #dpop can only be a child of .bubbleInfo:hover when .bubbleInfo is being hovered over, otherwise .bubbleInfo:hover doesn’t exist.  This type of selector is more dynamic than something you’d see more commonly.  That’s thinking outside the box.
Let’s see what we have so far.  We have a styled bubble with both a visible and hidden state. Our only problem is that it isn’t a smooth transition, and the bubble ends up partly off the page.  Since it’s absolutely positioned, you just need to add one line of code to make sure it’s absolutely positioned relative to its wrapper div.  Don’t worry, it’s a simpler concept than I’m making it sound.  We’re really just adding position:relative to the wrapper div so we can contain the popup bubble.

.bubbleInfo {								position:relative;}/*Contains the popup bubble*/

Ok, know we’re rocking.

The bubble should appear when you hover over the download image, and then disappear when you hover out.  Unfortunately, for some browsers, that’s as good as it’s gonna get. But we’ll use some progressive enhancement so people using better browsers get a few extra treats.

.bubbleInfo:hover > #dpop, .bubbleInfo > #dpop, #dpop {									-webkit-transition-duration: .25s; -webkit-transition-property: opacity,top;}

This uses CSS3 transitions to make the opacity and top properties smoothly change.  You’ll notice that now the change is less abrupt than it was previously.
One last thing before we’re done.  On the Coda website, the bubble has a little tail on the bottom, like a speech bubble.  We can recreate this with CSS.  There is an old trick that involves using borders to create triangles, we can take advantage of this in our code.

.bubbleInfo:hover > #dpop:after, #dpop:after {
	border-color:#fff transparent transparent;
	border-style:solid;
	border-width:10px 10px;
	bottom:-20px;
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	height:0;
	left:75px;
	position:absolute;
	width:0;
	}

There are some downfalls to this however.  The triangle is essentially just a border, so we can’t apply any CSS properties such as box-shadow, or borders, without thinks going a bit wonky.  It isn’t incredibly noticeable, but you might want to consider using an image nonetheless.

Wrapup

Go ahead and save all of your files, and

BAM!  You’ve got yourself a fully working CSS popup bubble.

This is pure CSS, with no images used at all.  It doesn’t look exactly like the one on the Coda website, but it’s pretty darn close.

If you want to implement this into your designs, you may want to consider whether it’s okay to lose some of the cool effects in older browsers.  Personally, if older browsers don’t get some fancy shadows and rounded corners, I really don’t care.  As long as it works, right?

Here are a few links to consider when customizing this effect -

• Panic Website
• jQuery Coda Bubble Tutorial
• Attribute Selecters
• CSS Speech Bubbles

Enjoy

View Demo / Download Files