Caja "Bubble" para los vínculos

En principio se trataba de una tooltip... pero como ya tengo las "sweettitle" en el blog, no me apetecia cambiar los scrpts. Pero me gusta, y pensé que podía añadirla al blog, para los vínculos que inserto en algunas entradas.
Por ejemplo:
Bubble Tooltips
Y se hace así:

1. El CSS, a colocar antes del cierre /skin:




.tooltip,.tooltip *{display:block} /*added by javascript*/



.tooltip{ width: 200px; color:#000;

font:lighter 11px/1.3 Arial,sans-serif;

text-decoration:none;text-align:center}



.tooltip span.top{padding: 30px 8px 0;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZoa8WAV006YGDakxxjmF27JkBN_ivfTRD-yjzxqvuvKhc0R06GcI1VgBdbWoCsvr4OMxXg_3o6vY-Z8CRFEiQtd4kuFpKOO9U8DjGAcbTrj9bVIEmeTIwHtG-2vt1Hb6p__Z2p0OhMav/s400/bt.gif) no-repeat top}



.tooltip b.bottom{padding:3px 8px 15px;color: #548912;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZoa8WAV006YGDakxxjmF27JkBN_ivfTRD-yjzxqvuvKhc0R06GcI1VgBdbWoCsvr4OMxXg_3o6vY-Z8CRFEiQtd4kuFpKOO9U8DjGAcbTrj9bVIEmeTIwHtG-2vt1Hb6p__Z2p0OhMav/s400/bt.gif) no-repeat bottom}





2. Y en la entrada o el sitio donde se quiera ver:

<span class="tooltip">

<span class="top">Por ejemplo:</span>

<b class="bottom"><a href="http://web-graphics.com/mtarchive/001717.php">Bubble Tooltips</a></b>

</span>

Quien quiera la burbuja con java, para que se despliegue al pasar el ratón por los links, que acuda a la página de Bubble Tooltips que he puesto, para ver cómo se insertan y cuáles son los scripts.