Fun with CSS-only bubbles

Hover over this paragraph for a quick and dirty tooltip using CSS3 transitions. See how cool these are? They can even contain links and form elements, since they stay put when you hover over the bubble itself.

This version, in constrast to the previous one, uses no Javascript. It uses a :hover pseudo-selector with nesting (View Source to see what I mean). While it appears to work just fine at first, it does have some odd side-effects. For example, you can cause the bubble to appear by hovering over the blank area where it would be. Because the bubble is now a child of the paragraph, hovering over the bubble counts as hovering over the paragraph. You'll find other weirdness if you play with it for a few mins. Oh well, getting closer. I had to make this text long enough to wrap because this technique is not perfect and the arrow doesn't look right with just one line of text.

Again, the triangles are done with a variation of this technique.