Bubble Tooltips - Ejemplo Javascript para utilizar BallonTips.

Bubble Tooltip es un ejemplo gratuito para poder utilizar en nuestra página web, tooltips redondos o también llamados Ballontips. Con el script podrás mostrar tips de información cuando el usuario pase el mouse sobre un enlace, es decir un título para la URL.

El código fuente está realizado en código Javascript y utiliza CSS para definir la presentación ( Alto, ancho, estilo de fuente ). También utiliza un archivo formato GIF para la imagen del BallonTip. ( bt.gif ).

Otras características y opciones:

• Mostrar una leve transparencia.
• El archivo javascript pesa menos de 3 KB.
• Es fácil de utilizar, ya que hay que escribir muy poco código HTML.
• El tooltip, además del texto que se quiera mostrar, debajo muestra la URL del enlace. La dirección URL se visualiza en forma automática, es decir que no es necesario escribirla o definirla en el código fuente de la página. El máximo de caracteres de la dirección URL es de 30.

El autor del ejemplo incluye una demostración de como implementarlo para poder agregarlo a nuestras páginas webs ( Archivo BubbleTooltips.html ).

De todas formas es muy sencillo, solo debemos añadir la referencia al fichero Javascript dentro de la sección Head de la página y activarlo:

<script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script>

Luego, en cada enlace, se debe escribir en el atributo Title del link, el texto a mostrar para el título, por ejemplo:

<p>Esto es un párrafo <a href="http://www.enlace.com/" title="Este es el texto del Ballontip">Este es el texto del enlace</a>

Importante:

Los archivos necesarios para que funcione el BallonTip (bt.gif, bt.css y Bubble Tooltips.js ) se deben encontrar en la misma carpeta de la página web que los utiliza. Otra cosa importante es que la hoja de estilo CSS ( bt.css), se añade en forma dinámica por el Javascript, por lo que no debemos cambiar el nombre del archivo. En caso de querer cambiarlo, tendríamos que modificar la función AddCss en el archivo BubbleTooltips.js.

Lenguajes: Javascript y CSS