Comment obtenir Twitter Bootstrap jQuery Elements (info-bulle, popover, etc.) travaillant?

Question

Je joue avec la page de test Twitter Bootstrap dans Dreamweaver et je ne peut absolument pas obtenir toute sorte de popover, infobulle, ou tout autre Bootstrap jQuery goodie au travail. J'ai le code copié de la page de démonstration, sur le code versais source, ont des liens directs à tous les fichiers JavaScript corrects, et toujours rien. Le CSS fonctionne bien si, tout simplement pas de l'animation.

La page de démonstration mentionne ce code pour quelque chose:

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

Mais je ne sais pas quoi faire avec quelque chose comme ça parce que je ne vois pas quelque chose comme ça dans un site de travail.

Si quelqu'un pouvait me donner des suggestions pour le (probablement) petit lien qui me manque, je l'apprécie grandement.

EDIT

Je trouve l'extrait de code suivant après avoir affiché ceci:

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

Et il a obtenu le déclenchement popovers! Je jamais rien vu de ce genre dans le code source de l'un des sites de travail que je voyais bien. souhaitent vraiment la documentation Bootstrap aurait pu faire qu'un petit détail peu plus clair pour les nouveaux utilisateurs de jQuery comme moi.

Answer 1

Vous devez spécifier un identifiant ou une classe pour l'élément que vous souhaitez afficher un popover quand il planait au-dessus. Voici un exemple:

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

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

Answer 2

Pour les personnes qui viennent ici de Google:

Vous pouvez obtenir infobulle et popover automatiquement au travail comme les autres plugins Bootstrap avec le code suivant:

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

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

Vous pouvez alors utiliser des attributs de données comme 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>

est ce que les docs Bootstrap quand il dit que les données-api pour ces plug-ins sont « opt-in ».

Answer 3

Si vous voulez infobulle d'amorçage puis:

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

Si vous voulez infobulle Jquery alors:

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

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

HTML restera même dans les deux cas:

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