¿Cómo hacer que los elementos de jQuery de bootstrap de Twitter (ToolTip, Popover, etc.) funcionen?

Question

He estado jugando con la página de prueba de Bootstrap de Twitter en Dreamweaver y no puedo obtener ningún tipo de popover, información sobre herramientas u otro bootstrap jQuery Goodie para que funcionen. He copiado el código de la página de demostración, vertido sobre el código fuente, tengo enlaces directos a todos los archivos JavaScript correctos y todavía nada. Sin embargo, el CSS funciona bien, solo ninguna de las animaciones.

La página de demostración menciona este código para algo:

$('#example').popover(options)

Pero no tengo idea de qué hacer con algo así porque no vi nada así en ningún sitio de trabajo.

Si alguien pudiera darme alguna sugerencia para el (probablemente) pequeño enlace que me estoy perdiendo, lo agradecería mucho.

EDITAR

Encontré el siguiente fragmento de código después de publicar esto:

$(document).ready(function() {
    $("a[rel=popover]")
        .popover({
            offset: 10
        })
        .click(function(e) {
            e.preventDefault()
        })
});

¡Y consiguió que el popovers se activara! Sin embargo, nunca vi algo así en el código fuente de ninguno de los sitios de trabajo que vi. Realmente desearía que la documentación de Bootstrap haya hecho que ese pequeño detalle sea un poco más claro para los nuevos usuarios de jQuery como yo.

Answer 1

Debe especificar una identificación o clase para el elemento que desea mostrar un Popover cuando se ronde. Aquí hay un ejemplo:

<div id="example">Some element</div>

<script>
  $('#example').popover({
    title: 'A title!',
    content: 'Some content!' 
  })
</script>

Answer 2

Para las personas que vienen aquí de Google:

Puede hacer que ToolTip y Popover funcionen automáticamente como los otros complementos de Bootstrap con el siguiente código:

<script type="text/javascript">
    $(function () {
        $('body').popover({
            selector: '[data-toggle="popover"]'
        });

        $('body').tooltip({
            selector: 'a[rel="tooltip"], [data-toggle="tooltip"]'
        });
    });
</script>

Luego puede usar atributos de datos como lo normal:

<a rel="tooltip" title="My tooltip">Link</a>
<a data-toggle="popover" data-content="test">Link</a>
<button data-toggle="tooltip" data-title="My tooltip">Button</button>

Esto es lo que significan los documentos de Bootstrap cuando dice que el Data-API para estos complementos está "optando".

Answer 3

Si quieres información sobre herramientas de bootstrap, entonces:

    $(function () {
        $("[rel='tooltip']").tooltip();
    });

Si quieres JQuery ToolTiP, entonces:

    /*** Handle jQuery plugin naming conflict between jQuery UI ***/
$.widget.bridge('uitooltip', $.ui.tooltip);

    $(function () {
        $("[rel='tooltip']").uitooltip();
    });

HTML seguirá siendo el mismo en el caso:

  <div title="Tooltip text" rel="tooltip"> div data ... </div>