Tooltip brillante hecho con CSSIII

Blizaga, ha creado un tutorial sobre como hacer un tooltip brillante sin ningun efecto de hover.
El ejemplo tiene algunas características interesantes, tales como bordes redondeados, un icono y una especie de punta de flecha.

Imagen:


Ejemplo real:

/* Burbuja en general */
.box {
    position: relative; /* Permitir que los elementos situados dentro de la burbuja */
    width: 280px; /* Ancho */
    height: 100px; /* Alto */
    padding: 10px; /* Expansión */
    background: #bfdcff; /* Color de fondo */
    border: 3px solid #76b3ff; /* Borde */
    -moz-border-radius: 10px; /* Redondeados para navegadores mozilla */
    -webkit-border-radius: 10px; /* Redondeados para navegadores WebKit */
    border-radius: 10px; /* Redondeada */
}

/* Burbuja mitad hacia arriba*/
.box .highlight {
    position: absolute; /* Posición absoluta con respecto a la caja */
    width: 100%; /* Anchura 100% de la caja */
    padding: 3px; /* Agrega 3px de la anchura (100% + 3px)*/
    height: 60px;
    top: -3px; /* Posición sobre el borde izquierdo de la caja */
    left: -3px; /* Posición sobre el borde superior de la caja */
    background: white;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20); /* Opacidad para IE */
    opacity: .2; /* Opacidad para otros navegadores */
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; /* Borde izquierdo redondeado */
    border-top-right-radius: 10px; /* Borde derecho redondeado */
}

/* Mensaje dentro de la burbuja */
.box h2 {
    position: relative; /* Lugar por encima de los otros elementos */
    margin: 0 0 0 62px; /* Margen */
    color: #555555; /* Color */
    font: bold 20px arial; /* Tipo de letra */
}

/* Párrafo */
.box p {
    margin-top: 50px; /* Margen hacia abajo */
    font: 15px "Arial"; /* Tipo de letra */
}

/* Signo de interrogación */
.box .icon {
    float: left; /* Alineado en general a la izquierda */
    border: 1px solid #76b3ff; /* Borde */
    height: 50px; /* Alto */
    width: 50px; /* Ancho */
    background: white; /* Color de fondo */ 
    text-align: center; /* Signo alineado */
    color: #555555; /* Color */
    font: bold 40px/40px "times new roman"; /* Tipo de letra*/
    -moz-border-radius: 30px; /* Redondeados para navegadores mozilla */
    -webkit-border-radius: 30px; /* Redondeados para navegadores WebKit */
    border-radius: 30px; /* Redondeada */
}

/* Triángulo */
.box .arrow, .box .arrow_overlay {
    position: absolute; /* Posición absoluta con respecto al triángulo */
    width: 0px; /* Ancho */
    height: 0px; /* Alto */
    bottom: -15px; /* 15px posición por debajo del fondo de la caja*/
    right: 40px; /* Posición 40px por la derecha de la caja */
    border-top: 15px solid #76b3ff; /* El triángulo */
    border-right: 15px solid transparent; /* Ancho de la derecha */
    border-left: 15px solid transparent; /* Ancho de la izquierda */
}
.box .arrow_overlay {
    top: -15px; /* Posición en relación con la flecha */
    left: -10px; /* Posición en relación con la flecha */
    border-top: 10px solid #bfdcff; /* Más pequeño triángulo */
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}

<div class="box"> 
<div class="icon">?</div> 
<div class="highlight"></div> 
<div class="arrow"><div class="arrow_overlay"></div></div> 
<h2>Dentro de esta burbuja va incluido el mensaje deseado.</h2><p>Y este es un ejemplo de un párrafo normal.</p></div>