Ich kann die Twitter-Bootstrap-Popover-Demo auf jsfiddle.net nicht nachbilden.

Question

Twitter verfügt über ein JavaScript-Plugin, mit dem kleine Popovers erstellt werden können (wenn Sie über ein Element scrollen, wird ein Feld mit zusätzlichen Informationen eingeblendet). Dieses Plugin verwendet auch die Datei bootstrap-twipsy.js.

Hier gibt es eine Demo http://twitter.github.com/bootstrap/javascript.html wenn Sie nach unten zur Popovers-Demo blättern.

Ich habe den Code für die Demo in diese Datei kopiert http://jsfiddle.net/mjmitche/mT76T/16/

und ich habe auch die notwendigen Dateien (bootstrap-popver.js und bootstrap-twipsy.js), aber die Popovers nicht funktionieren, wenn ich über scrollen.

Kann mir jemand erklären, was ich falsch mache?

Dies ist die html

<a href="#" class="btn danger" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A title">hover for popover</a>

und dies ist die Jquery-Funktion, die ich hinzugefügt habe, um das Popover zu zeigen

    $(document).ready(function() {
   $('#blob').popover('show');
});

Answer 1

Sie müssen nicht anrufen $('#blob').popover('show') . Auf diese Weise würden Sie das Popover manuell auslösen.

Um das Popover einfach zu initialisieren aufrufen, sollten Sie stattdessen $('#blob').popover() mit allen Optionen, die Sie angeben möchten.

In diesem JSFiddle können Sie sehen, wie es funktioniert: http://jsfiddle.net/mT76T/18/

Pro-Tipp: Anstatt alles in einen dokumentenfertigen Funktionsaufruf zu verpacken, können Sie einfach die in JSFiddle integrierte onDomReady aus der Dropdown-Liste. Das spart etwas Zeit.

Answer 2

Versuchen Sie es stattdessen so, Beispiel hier http://jsfiddle.net/mT76T/17/

$(document).ready(function() {
           $(function () {
                $("#blob").popover({
                offset: 10
                    })

})
});