Tooltips: Globo de información en nuestros links
Abril 12th, 2007 | Publicado por Francisco en Javascript | 1 Comentario
Bubble Tooltips es una herramienta que coloca “globos” de información sobre un enlace al pasar el mouse sobre él.
Esta herramienta consta escencialmente de cuautro elementos:
- Un archivo javascript de 2 Kb.
- Una hoja de estilos.
- Una imagen.
- Cuatro lineas de código de tu página.
Vamos a ver como implementarla en nuestra web:
- Descarga los archivos en un zip desde aquí o ve a la web principal para conseguir la versión más reciente. En este zip encontraras los siguientes archivos:- BubbleTooltips.js. Script
- bt.css Hoja de estilos
- bt.gif Imagen para el globo - Sube estos 3 archivos a tu host.
- Dentro de las etiquetas <head> y </head> hacemos un llamado al script con el siguiente código:
<script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script>Esto habilita el script en toda la página, sí quieres que aparesca sólo en una parte, como podria ser el contenido general, agregamos el nombre entre comillas del div que deseamos se muestre dentro de la función “enableTooltips()”. Por ejemplo, sí mi contenido general esta dentro del div llamado “contenedor”:
<div id="contenedor"> ... Contenido donde se habilitará Bubble Tooltips ... </div>entonces llamamos al script de la siguiente forma:
<script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips("contenedor")}; </script>Nota:No hay necesidad de hacer llamado a la hoja de estilos dado que el script lo hará al encontrarlo en tu host
- En la zona en la que hallamos habilitado el script, ya sea toda la página o cierta parte, podemos hacer usar esta herramienta de la siguiente forma:
<span class="tooltip"> <span class="top">Título del link</span> <b class="bottom">URL del link</b> </span>Cabe resaltar que debes colocar la URL completa del link, pero al momento de mostrarse en el globo solo se mostraran los primeros 30 caracteres.
- Para personalizar la visualización del globo, esto es opcional, tienes que modificar las clases que se encuentran dentro de la hoja de estilos CSS, que son las siguientes:
.tooltip,.tooltip *{display:block} .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(bt.gif) no-repeat top} .tooltip b.bottom{padding:3px 8px 15px;color: #548912; background: url(bt.gif) no-repeat bottom}
Noviembre 18th, 2007 a las 5:07 pm (#)
Disculpa pero el enlace de descarga no funciona. :S podrian volver a ponerlo? desde ya muchas gracias !