Come ottenere Twitter Bootstrap jQuery Elements (tooltip, popover, ecc) che lavorano?

Question

Ho giocato con la pagina di prova Twitter Bootstrap in Dreamweaver e io assolutamente non può ottenere qualsiasi tipo di popover, tooltip, o altro goodie Bootstrap jQuery per il lavoro. Ho copiato il codice dalla pagina demo, versato sopra il codice sorgente, hanno collegamenti diretti a tutti i file JavaScript corretti, e ancora niente. Il CSS funziona bene, però, solo nessuno dell'animazione.

La pagina dimostrativa menziona questo codice per qualcosa:

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

Ma non ho idea di cosa fare con una cosa del genere, perché non ho visto niente di simile in qualsiasi sito di lavoro.

Se qualcuno mi potrebbe dare qualche suggerimento per la (probabilmente) piccolo legame che mi manca, sarei molto grato.

Modifica

Ho trovato il seguente frammento di codice dopo la pubblicazione in questo modo:

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

E ha ottenuto le popovers innescando! Non ho mai niente di sega che nel codice sorgente di uno qualsiasi dei siti di lavoro che ho visto però. C'è la voglia della documentazione Bootstrap avrebbe potuto fare quel piccolo dettaglio un po 'più chiaro per i nuovi utenti di jQuery come me.

Answer 1

È necessario specificare un id o classe per l'elemento che si desidera visualizzare un popover quando è aleggiava. Ecco un esempio:

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

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

Answer 2

Per le persone che vengono qui da Google:

È possibile ottenere tooltip e popover per funzionare automaticamente come gli altri plugin Bootstrap con il seguente codice:

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

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

È quindi possibile utilizzare gli attributi dati come normale:

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

Questo è ciò che la documentazione Bootstrap si intende quando si dice che i dati-API per questi plugin sono "opt-in".

Answer 3

Se si desidera bootstrap tooltip poi:

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

Se si desidera Jquery tooltip poi:

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

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

HTML rimarrà lo stesso in entrambi i casi:

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