hay una forma mas compleja, pero no complicada, de hacerlo con CSS y XHTML:
a.cajita{position:relative; color:#3E4A72; font-weight:bold; cursor: default;text-decoration:none;}
a.cajita:hover{color:#330033; text-decoration: none;}
a.cajita span{display:none;}
a.cajita:hover span{ /*el span se verá solo en estado :hover */ display:block; position:absolute; top:20px; left:10px; width:300px; border:1px solid #686868; background-color:#DBDBD8; color:#000000; text-align:justify; padding:5px; font-size:11px; font-weight:normal; -moz-opacity:0.8; filter:alpha(opacity=80); khtml-opacity:0.8; opacity:0.8; -moz-border-radius:5px;}
Ahora para crear el efecto solo agregamos un link con las etiquetas <a>link</a>, de la siguiente manera:
<a href=”#” onclick=”return false” class=”cajita”>link<span>Esta es la explicación del texto.</span></a>.
saludos