Five finger exploding pup-up bubble technique!

Perhaps you have a page with lots of technical terms or industry jargon. You could create a glossary page to explain it all, or you could use this cool technique to highlight and elaborate on the spot.

Sure, similar techniques can be achieved in javascript, but why bother when you can use CSS?

Let's start by looking at the html. Each element you wish to explain via bubble is surrounded with a set of <spans> each assigned with a "class".

• The anchor tag comes first
• then the text to be displayed (the jargon)
• then a span for the top
• a span for the middle
• The explanation to appear in the bubble
• a span for the bottom
• and closing tags

Here it is:
<a href="#" class="bt">Place your cursor here<span class="thebubble"><span class="top"></span><span class="middle">This is the pop-up bubble technique I was talking about!</span><span class="bottom"></span></span></a>

Repeat the html wherever you want a bubble to appear.

Of course, all things regarding the bubble are controllable via CSS. Speaking of which, let's take a look...

/*--- for the sake of brevity I'm excluding non-bubble css --- */

Nothing too complicated to begin with - we set a relative position with an absolute z-index to control the text depth on the screen.

a.bt{ position:relative; z-index:24; color:#3CA3FF; font-weight:bold; text-decoration:none; }

We set the default span tag to not appear... default: none

a.bt span{ display: none; }

IE hack, something must be changed in a for ie to execute it... we set the hover state to a higher z-index and change the text color

a.bt:hover{ z-index:25; color: #f72a09; background:;}background:;

Now for the bubble. This first set of tags sets the bubble to appear in the top left corner

a.bt:hover span.thebubble{ display:block; position:absolute; top:0px; left:0;

This set of tags sets the text padding, width, color and alignment

padding: 15px 0 0 0; width:200px; color: #000000; text-align: center;

This last set of tags sets the bubble to be slightly see-through, giving it a more bubblesque appearance

filter: alpha(opacity:90); KHTMLOpacity: 0.90; MozOpacity: 0.90; opacity: 0.90;}

This code sets the positioning of the bubble top and assigns it to an image (could be a .gif or .png)

a.bt:hover span.top{ display: block; padding: 30px 8px 0; background: url(bubble.gif) no-repeat top; }

This code sets the positioning of the bubble middle and assigns it to an image (could be a .gif or .png). It repeats the image vertically to acommodate the text.

a.bt:hover span.middle{ display: block; padding: 0 8px; background: url(bubble_filler.gif) repeat bottom; }

This code sets the positioning of the bubble bottom and assigns it to an image (could be a .gif or .png)

a.bt:hover span.bottom{ display: block; padding:3px 8px 10px; color: #000000; background: url(bubble.gif) no-repeat bottom;}

That's it. As always, experiment and have fun you crazy kids.