✔ Probleme Bootstrap Popover zu initialisieren

[Jan-Frederik Stieler]

Hallo,
ich versuche grad von Bootstrap das Popover zum laufen zu bekommen.
Ich habe zu Testzwecken ersteinmal das Beispiel von der Bootstrapwebseite eingebaut

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

Wenn ich versuche das Popover per

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

zu initialisieren funktioniert das nicht mit

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

funktioniert es.

Wenn ich

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

jedoch in der Konsole eingebe dann funktioniert es. Strange!

Kann mir irgendwer dieses Verhalten erklären?

Grüße

 

[SpiceLab]

An welcher Stelle des HTML-Codes versuchst du das Script zu initialisieren?

Am Dokumentende, wo sich standardmäßig jquery.min.js und bootstrap.min.js befinden, funktioniert es einwandfrei

    ...
    </div><!-- /.container -->

    <!-- Bootstrap-JavaScript
     ================================================== -->
    <!-- Am Ende des Dokuments platziert, damit Seiten schneller laden -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
    $(function () {
      $('[data-toggle="popover"]').popover();
    })
    </script>
  </body>
</html>

 

[Jan-Frederik Stieler]

Hi,
ja ich hab die JS-Dateien am Dokumentenende eingefügt und auch in der richtigen Reihenfolge.
Funktioniert trotzdem so nicht. Ist halt echt etwas merkwürdig.

 

[SpiceLab]

Kannst du das bitte mal auf deiner bevorzugten Plattform jsbin.com zeigen?

 

[Jan-Frederik Stieler]

Ja kann. Dauert aber noch etwas da PHP im Spiel ist für das ich erstmal HTML-Platzhalter schaffen muss .

 

[SpiceLab]

Ja kann. Dauert aber noch etwas da PHP im Spiel ist für das ich erstmal HTML-Platzhalter schaffen muss .

Kein Problem, ich hab es nicht eilig

 

[Jan-Frederik Stieler]

Kein Problem, ich hab es nicht eilig

http://jsbin.com/zucuko/2/edit

 

[SpiceLab]

Der eingangs gezeigte Button hat sich bei dir zwischenzeitlich zu einem grafischen Verweis gewandelt; das Popover blitzt daher nur kurz auf, weil das Verweisziel (href="") geladen wird - die Überschrift und der Link verschwinden im Viewport "Output".

http://jsbin.com/jokaxafuxe/1/ mit <button>-Element läuft es aber ansonsten wie geschmiert.

 

[Quaese]

Hi,

wenn ich es richtig verstehe, reagiert das Popup auf einen Klick. Dieser löst jedoch auch die Standardfunktionalität des a-Tags aus und verfolgt den angegebenen Verweis aus dem href-Attribut. Hierzu reicht die Angabe des Attributs.

Es existieren somit zwei Lösungsmöglichkeiten:

• du verhinderst mit Javascript das Verfolgen des Linkziels

    $('[data-toggle="popover"]').on('click', function(evt){
      evt.preventDefault();
    });

• du entfernst das href-Attribut aus dem a-Tag

Ciao
Quaese

 

[Jan-Frederik Stieler]

Hi,
danke das mit dem Klick ist mir auch schon aufgefallen deshalb habe ich den Trigger auf Hover umgestellt.
Inzwischen funktioniert es auch. Ich kann jetzt leider nicht mehr nachvollziehen warum das am Anfang auch mit dem Hover nicht funktioniert hatte.
Eventuell lag es auch einfach nur am Cache.

Grüße