Popover mit Toggle- oder Hover-Effekt Bootstrap 4

Die Popover-Komponente ist ein kleines Popup-Feld, das angezeigt wird, wenn der Benutzer darauf klickt oder den Mauszeiger über ein Element bewegt.

Zum Aktivieren der Popover in Bootstrap 4 wird ein kleines Script benötigt welches am Ende vor dem schließenden Body-tag eingefügt werden muss.

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

Wie erstell man einen Popover

Um einen Popover zu erstellen, fügt man das Attribut data-toggle="popover" zu einem Element hinzu.

Verwendet wird das title-Attribut, um den Header-Text des Popover anzugeben und das Attribut "data-content", um den Text anzugeben, der im Hauptteil des Popover angezeigt werden soll:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Hier ist der Content für den popover">Toggle popover</a>
Beispiel:

Das Auslösen von Popovers auf versteckte Elemente funktioniert nicht.

Positionirung Popovers

Standardmäßig wird das Popover auf der rechten Seite des Elements angezeigt.

Das data-placement Attribut wird verwendet, um die Position des Popover auf der oberen, unteren, linken oder rechten Seite des Elements festzulegen.

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Beispiel:

Popovers schließen

Standardmäßig wird das Popover geschlossen, wenn Sie erneut auf das Element klicken. Man kann jedoch das Attribut data-trigger = "focus" verwenden um das Popover beim Klicken außerhalb des Elements zu schließen

<a href="#" title="Focus popover" data-toggle="popover" data-trigger="focus" data-content="Klick irgendwo im Dokument um dieses Popover zu schließen!">Click me</a>
Beispiel:

Wenn das Popover angezeigt werden soll, wenn sich der Mauszeiger über das Element befindet, verwenden man das Attribut "data-trigger" mit dem Wert "Hover", also data-trigger="hover"

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Der Inhalt des Popover">Hover over me</a>
Beispiel:

HTML verwenden

Möchte man HTML im Popover verwenden muss das Script geändert werden. Durch hinzufügen von html: true wird HTML im Popover aktiviert (gilt dan für alle Popover auf der Seite.

Möchte man es nur für ein spezielles Popover nutzen, ist es möglich durch hinzufügen von des Attributs data-html="true" HTML in diesen Popover zu nutzen

 <script>
     $(document).ready(function() {
         $("[data-toggle=popover]").popover({
             html: true,
         });
     });
 </script>
Beispiel:

CSS für Popover

Die Klassen:

.popover-header -> Header-Bereich (Hintergrundfarbe, Schriftart, Farbe u.s.w. )

.popover-content -> Popover Content-Bereich (Hintergrundfarbe, Schriftart, Farbe u.s.w. )

.popover .arrow -> Popover Pfeil

.popover bs-popover-right

Hintergrundfarbe ändern
Um die Hintergrundfarbe der Popover zu andern ist ein wenig mehr css nötig da der Pfeil für alle Richtungen gestylt werden muss.

zum Beispiel die Hintergrundfarbe in "red" ändern

.popover-body {
    background-color: red;
}
.popover-header {
    background-color: red;
    border-bottom: none;    /*Trennliene entfernen */
}
.popover.bs-popover-right .arrow:after {
    border-right-color: red;
}
.popover.bs-popover-top .arrow:after {
    border-top-color: red;
}
.popover.bs-popover-left .arrow:after {
    border-left-color: red;
}
.popover.bs-popover-bottom .arrow:after {
    border-bottom-color: red;
}
.popover-content {
    background-color: red;
}

Popover Größe ändern

die Größe ändert man z.b. mit:

.popover {
    width: 400px !important;
    max-width: 400pc !important;
}