Facebook Tooltip HTML and CSS

Facebook recently implemented a new, lighter tooltip. I say the tooltip is lighter because it seems a lot quicker and more elegant than their previous effort. I took a few moments to grab the HTML structure and CSS rules to see how they did it.

The HTML

The tooltip structure consists of five elements:

<div class="uiContextualDialogPositioner uiContextualDialogLeft" style="top: 20px; left: 600px;">
 <div class="uiOverlay uiContextualDialog uiOverlayArrowRight" style="width: 347px; top: 0px; ">
  <div class="uiOverlayContent">
   <div class="uiOverlayContentHolder">
    {content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}
   </div>
  </div>
  <div class="uiOverlayArrow" style="top: 15px; margin-top: 0px;"></div>
 </div>
</div>

The root element dictates the position of the tooltip (which is most likely injected to the body). The sole child element controls the width of the tooltip. That element contains two elements: the content container and the and the arrow node (which I've changed from an I element to a DIV). The last, innermost DIV element will hold the content and provide padding.

The CSS

The CSS to create the tooltip layout is actually very minimal:

body {
 font-size: 11px;
 font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
 color: #333;
 line-height: 1.28; 
 text-align: left;
 direction: ltr;
}

.uiContextualDialogPositioner, .uiContextualDialogPositioner .uiContextualDialog {
 position: absolute;
 z-index: 200;
}

.uiContextualDialogLeft .uiContextualDialog {
 right: 0;
}

.uiOverlayArrowRight {
 padding-right: 10px;
}

.uiOverlay {
 position: relative;
 z-index: 200;
}

.uiContextualDialog, .uiContextualDialog:focus {
 outline: 0 solid transparent;
}

.uiOverlayContent {
 background: white;
 border: 1px solid #8C8C8C;
 border: 1px solid rgba(0, 0, 0, .45);
 border-bottom: 1px solid #666;
 -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
 -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
 box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
 position: relative;
}

.uiOverlayContentHolder {
 padding: 10px;
}

.uiOverlayArrow {
 position: absolute;
 overflow: hidden;
}

.uiOverlayArrowRight .uiOverlayArrow {
 background-image: url(sprite.png);
 background-repeat: no-repeat;
 background-position: -177px -309px;
 height: 16px;
 right: 2px;
 width: 9px;
}

Some CSS properties may need to be vendor-prefixed.

The content pane contains the majority of the CSS rules, include the box-shadow and border, both of which use rgba color for a more detailed effect. Showing and hiding of the tooltip may be done via CSS key-frames or JavaScript -- the choice would be up to the individual implementing the tooltip.

Why Show This?

Two reasons. The first is that I appreciate well-coded features like this. The second, more important reason, is that I'll be creating a JavaScript-powered version of this functionality which accounts for content size, position on page, stacking/z-index management, etc. Do I create as a jQuery and MooTools plugin? Do I create it as a standalone JavaScript project. Let me know your thoughts!