Wie kann ich Twitter Bootstrap JQuery -Elemente (Tooltip, Popover usw.) bearbeiten?

Question

Ich habe mit der Twitter -Bootstrap -Testseite in Dreamweaver gespielt und kann absolut kein Poplover, Tooltip oder andere Bootstrap JQuery Goodie zum Arbeiten bekommen. Ich habe Code von der Demo -Seite kopiert, über den Quellcode gegossen, direkte Links zu allen richtigen JavaScript -Dateien und immer noch nichts. Das CSS funktioniert jedoch gut, nur keine der Animationen.

Auf der Demo -Seite erwähnt diesen Code für etwas:

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

Aber ich habe keine Ahnung, was ich mit so etwas anfangen soll, weil ich auf keiner Arbeitsseite so etwas gesehen habe.

Wenn mir jemand Vorschläge für den (wahrscheinlich) winzigen Link geben könnte, den ich vermisse, würde ich ihn sehr schätzen.

BEARBEITEN

Ich fand den folgenden Code -Snippet, nachdem ich Folgendes gepostet habe:

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

Und es hat die Popovers ausgelöst! Ich habe so etwas im Quellcode eines der Arbeitsstellen, die ich gesehen habe, nie gesehen. Ich wünschte wirklich, die Bootstrap -Dokumentation hätte dieses winzige Detail für neue Jquery -Benutzer wie mich etwas klarer machen können.

Answer 1

Sie müssen eine ID oder Klasse für das Element angeben, das Sie ein Popover anzeigen möchten, wenn sie überlebt. Hier ist ein Beispiel:

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

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

Answer 2

Für Leute, die von Google hierher kommen:

Sie können Tooltip und Popover so automatisch wie die anderen Bootstrap -Plugins mit dem folgenden Code bearbeiten:

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

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

Sie können dann Datenattribute wie normal verwenden:

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

Dies bedeutet die Bootstrap-Dokumente, wenn die Daten-API für diese Plugins "Option" sind.

Answer 3

Wenn Sie Bootstrap Tooltip möchten, dann:

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

Wenn Sie JQuery Tooltip möchten, dann:

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

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

HTML bleibt in beiden Fällen gleich:

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