Warum funktioniert meine Bootstrap popover nicht funktionieren?

Ich versuche, die Bootstrap popover. Also kopierte ich den genauen code aus dem Beispiel in meine Webseite, die leider nicht funktioniert. Ich klebte den vollständigen code weiter unten und erstellt ein jsfiddle hier.

Habe ich versucht, indem es in einer bootstrap-container und in Zeilen und Spalten, aber nichts scheint zu funktionieren.

Weiß jemand, wie ich das fiddle funktioniert? Alle Tipps sind willkommen!

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</body>
</html>
  • Sie brauchen nicht zu, wenn Sie einschließlich bootstrap.min.js wie OP ist.
  • Ich habe aktualisiert Ihre JSFiddle demo zu zählen jQuery, als sonst, es gab eine Fehlermeldung über jQuery zu fehlen (obwohl Sie in Ihrem snippet).
  • LOL, 6 Antworten in 10 Minuten über die gleiche Sache: $('[data-toggle="popover"]').popover()
  • For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself. Wie kommen Sie erhalten das Dokument, aber Sie haben es nicht gesehen.
  • Mögliche Duplikate von Bootstrap popover funktioniert nicht
InformationsquelleAutor kramer65 | 2015-05-05
  1. 23

    Haben Sie vergessen, diese :
    http://getbootstrap.com/javascript/#opt-in-functionality

    Aus performance-Gründen, den Tooltip und Popover-Daten-apis sind opt-in, was bedeutet, müssen Sie initialisieren Sie Sie selbst.

    Einer Art und Weise zu initialisieren, alle tooltips auf einer Seite wäre, um Sie auszuwählen, indem Sie Ihre data-toggle-Attribut:

    $(function () {
    $('[data-toggle="popover"]').popover()
})
    • Denn dies ist die einzige Antwort, die links und Zitate der Quelle, +1 bis Sie.
    InformationsquelleAutor Seblor
  2. 2

    Sollten den 

    $(function () {   
  $('[data-toggle="popover"]').popover() 
});

    Beispiel arbeiten hier

    InformationsquelleAutor vamsikrishnamannem
  3. 2

    Leistung für Grund sollten Sie initilize popover selbst :

    <script>
$(function () {
  $('[data-toggle="popover"]').popover()
})
</script>

    Referenz

    Sicher sein, fügen Sie die jQuery-Bibliothek vor dem bootstrap.

    jsFiddle

    InformationsquelleAutor jmgross
  4. 2

    Ihnen fehlten Funktion rufen Sie in Ihrer fiddle und jquery-Bibliothek wurde auch die fehlende

    Habe ich Hinzugefügt, fehlende Abhängigkeiten in deinem Beispiel

    überprüfen fiddle: https://jsfiddle.net/L41g98qx/9/

    hier ist ein popover Funktionsaufruf 

    $(function () {
  $('[data-toggle="popover"]').popover()
})

    Unterhalb vom text ist kopiert von getbootstrap.com hier ist, was Sie sagen wollen, über die popover-plugin

    Opt-in-Funktionalität

    Aus performance-Gründen, den Tooltip und Popover-Daten-apis sind opt-in, was bedeutet, müssen Sie initialisieren Sie Sie selbst.

    Einer Art und Weise zu initialisieren, alle popovers auf einer Seite wäre, um Sie auszuwählen
    durch Ihre data-toggle-Attribut: Kopieren

    $(function () { $('[data-toggle="popover"]').popover() })

    InformationsquelleAutor Nilesh Mahajan
  5. 1

    Müssen Sie diese code im <head> 

    $(function () {
$('[data-toggle="popover"]').popover()
})
    InformationsquelleAutor khurram
  6. 1
    <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?" id="example">Dismissible popover</a>

    Diese Methode ist erforderlich,

    $('#example').popover('show');

    DEMO

    InformationsquelleAutor sheshadri
  7. 0

    können Sie eine id oder class Attribut in der button und als rufen Sie die popover-Methode auf, die Taste. Hier ist die Arbeit das wichtigste. http://jsfiddle.net/uqLor9ze/.

    Hier ist der Beispiel code aus fiddle

     $('#pop').popover();
    InformationsquelleAutor Kamran
Schreibe einen Kommentar