Publicado el Miércoles, 23 de Abril del 2008 por MyR

Coda Bubble - Un bonito tooltip

Un tooltip es la palabra que se usa para denominar esos mensajes emergentes que aparecen cuando pasamos nuestro ratón por encima de determinado sitio de una web, usados para ampliar información, mostrar algún mensaje concreto etc. Existen varios diferentes basados en mootools, jQuery, javascript o solamente en css.

Uno muy interesante es el que usan en el sitio de Coda al pasar el ratón sobre la imagen superior izquierda que pone Download, apareciendo un recuadro con esquinas redondeadas y transparencia donde muestran información de la descarga. Conseguirlo tiene su merito y complicación, ahora algo más fácil gracias a un tutorial liberado por jQuery for Designers donde nos dan los pasos para conseguirlo junto con los códigos necesarios.

Voy a explicar muy por encima como implementarlo, podéis ver una demo aquí y descargaros el paquete con todos los códigos que se usaron. Comentar que hay que tener cuidado con este tipo de recurso y donde lo usaremos además de ser obligatoria la visita a la entrada de jQuery for Desingners donde explican más detalladamente el proceso de creación del efecto.

Lo primero será incluir entre head y /head la llamada a jQuery, codabubble y la hoja de estilos:

PLAIN TEXT

JavaScript:

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="codabubble.js"></script>

En el segundo y último paso creamos la estructura html necesario entre body y /body:

PLAIN TEXT

HTML:

<body id="page">
<h1>Ejemplo de tooltio Coda Bubble</h1>
<div class="bubbleInfo">
<div>
<img class="trigger" src="nav-download.png" id="download" />
</div>
<table id="dpop" class="popup">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>
<tr>
<td class="left"></td>
<td><table class="popup-contents">
<tbody><tr>
<th>File:</th>
<td>coda 1.1.zip</td>
</tr>
<tr>
<th>Date:</th>
<td>11/30/07</td>
</tr>
<tr>
<th>Size:</th>
<td>17 MB</td>
</tr>
<tr>
<th>Req:</th>
<td>Mac OS X 10.4+</td>
</tr>
</tbody></table>
</td>
<td class="right"></td>
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"><img width="30" height="29" alt="popup tail" src="bubble-tail2.png"/></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>
</body>