Tooltips con twitter bootstrap

Estos últimos dias he estado trabajando con el framework Twitter Bootstrap y hoy me dispuse a implementar los llamados tooltips (descripciones emergentes) para los tags “a” de html. A continuación les presento un ejemplo muy sencillo de como incluir tooltips a sus aplicaciones web:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Boot Strap</title>
        <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container well">
        <h2>Tooltips, twitter Bootstrap</h2>
        <a href="#" id="tooltip1" rel="tooltip" title="tooltip text">lorem ipsum</a>
        </div>
         
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
        <script>
            $(function () {
                $('#tooltip1').tooltip();
            });
        </script>
    </body>
</html>

Fuente (ejemplos)
Twitter Bootstrap Tooltips

Acerca de Moycas
Developer Web @moycc

8 Responses to Tooltips con twitter bootstrap

  1. ALAN DIAZ dice:

    BACAN NO ME SALIAN PERO ME AYUDASTE…OJALA PUEDAS SUBIR MAS DEMOSTRACIONES, GRACIAS!

  2. falta llamar esta librería para que pueda funcionar

  3. crack dice:

    no funciona hay que agregar el plugin bootstrap-tooltip

    • Moycas dice:

      Hola Crack, estuve probando y no es necesario cargar la libreria bootstrap-tooltip, modifiqué el código de ejemplo para que cargue los js y css desde el sitio bootstrap y jquery y funciona perfecto, gracias por tu comentario, saludos.

  4. Hola, muy buena tu info… pero ahora tengo una gran dudo, quiero que el tooltip se ve en un contenedor, no sé que parametro pasarle en el container?

    Gracias

  5. Nicolás dice:

    MUY SIMPLE y Funciona! muchas gracias!!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: