English Português

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:

  1. 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
  2. Sube estos 3 archivos a tu host.
  3. 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

  4. 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.

  5. 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}

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Gonza / Hace 10 años /

      Disculpa pero el enlace de descarga no funciona. :S podrian volver a ponerlo? desde ya muchas gracias !

      Responder a Gonza →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad