Este es un modelo de tooltip animado con CSS3, que funciona en todos los navegadores. Es el que uso yo para mostrar la cajita cuando pasas el ratón por encima del autor de un comentario (sólo funciona en los comentarios nuevos porque usamos la api de gravatar), cuando votas un post o un comentario, etc.

El truco es ocultarlo usando la propiedad clip junto con position: absolute para ocultarlo, y mostrarlo restaurando la posición, y animando la opacidad con CSS3.

Usamos pseudoelementos para las flechas, y varios valores de la propiedad clip para que funcione en todos los navegadores.

Forma de uso

La forma de uso es una etiqueta cualquiera con la clase has-popup, con una etiqueta cualquiera con la clase popup. Por ejemplo:

<span class="has-popup">Ver el contenido<span class="popup">Éste es el contenido</span></span>

Que produciría el siguiente resultado: Ver el contenido Éste es el contenido

El CSS

El código CSS es el siguiente:

.popup {
	display: block;

	/* Ocultarlo */
	position: absolute;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);

	/* Darle un ancho fijo */
	max-width: 100%;

	/* 
	 * Posición:
	 * en este caso movemos el popup hacia la izquierda y hacia arriba, y lo reposicionamos cuando lo mostramos
	 */
	z-index: 1;
	left: 0;
	bottom: 300%;

	/* Efecto con la opacidad */
	opacity: 0;

	/* La transición */
	-webkit-transition: all .7s;
	-moz-transition: all .7s;
	-o-transition: all .7s;
	transition: all .7s;

	/*
	 * Aspecto
	 */
	background: white;

	/* Chrome tiene algunos problemas con paddings en em para mostrar las flechas en la posición correcta, así que usaremos pixels */
	padding: 10px 1em;

	/* El borde y la sombra */
	border: 1px solid #ccc;
	-webkit-box-shadow: 0 0 4px #ccc;
	-moz-box-shadow: 0 0 4px #ccc;
	box-shadow: 0 0 4px #ccc;
}
/* Las flechas */
.popup:before, .popup:after {
	content: "";
	width: 0;
	height: 0;
	border: 6px solid transparent;
	position: absolute;
	top: 100%;
	left: 20px;
	margin-left: -6px;
	border-top-color: white;
	z-index: 2;
}
/* La segunda flecha que hace el efecto de borde */
.popup:before {
	border-top-color: #ccc;
	margin-left: -7px;
	border-width: 7px;
	z-index: 0;
}

/* Para posicionar el popup respecto al padre */
.has-popup {
	position: relative;
}

/* Lo mostramos: Restauramos la posición y la opacidad para hacer el efecto */
.has-popup:hover .popup {
	/* 
	 * IE7- no admite auto
	 * IE8 usa con auto igual que rect(auto, auto, auto, auto). Usamos inherit
	 * Además, así es accesible ;)
	 */
	clip: rect(auto auto auto auto);
	clip: auto;
	clip: inherit;
	opacity: 1;
	bottom: 100%;
}

Compatibilidad

El CSS está diseñado para que funcione con todos los navegadores. La animación se verá en IE 10, y el resto de los navegadores que no se llaman Internet Explorer.
La sombra también se verá en IE9. La flecha se verá a partir de IE8 (incluido).