Centered pop-up tooltip in small icons

I've encountered the need for a specific sort of drop-down tooltip on hover (or sometimes click), activated either way by a small icon, say 20x20 pixels. The design would look something like this:

So, as you can see, the box that appears hovers over all other content on the page. It is variable in both width and height depending on content.

Now, as usual, the challenge is to accomplish this using only CSS. Fortunately, in this case, I'm only worried about bleeding edge browsers, and don't ne开发者_JAVA百科ed to consider mobile at all. In the past, I've wimped out due to a lack of time and put the top 'pointer' element (that is centered on the icon) on the left, and put the entire box aligned to the left edge of the icon - but that's far from optimal.

I'd love any suggestions here, it'd be a fantastic solution to have in my arsenal in the future.

I think you're going to need to know the width, in order to center the box within an element smaller than itself. If you're only considering bleeding-edge browsers, the requisite JS is going to be simple and quick to write and run.

My standard centering technique for elements like this is:

.icon {position:relative;}
.popUp {position:absolute;
    width:200px;
    left:50%;
    margin-left:-100px; /* Half the width */
}

All you would need to do to make it work would be to detect the width of your content with JS, and set the left-margin accordingly. I'm sure you could set some sensible default values for any users which happen to have JS disabled/unavailable.