Popovers

Überblick

Wissenswertes zur Verwendung des Popover-Plugins:

• Popovers verlassen sich zur Positionierung auf die Drittanbieter-Bibliothek Popper . Sie müssen popper.min.js vor bootstrap.js einfügen oder bootstrap.bundle.min.js/ verwenden bootstrap.bundle.js, das Popper enthält, damit Popovers funktionieren!
• Popover erfordern das Tooltip-Plugin als Abhängigkeit.
• Popover sind aus Leistungsgründen optional, Sie müssen sie also selbst initialisieren .
• Länge Null titleund contentWerte zeigen niemals ein Popover.
• Geben Sie container: 'body'an, um Renderprobleme in komplexeren Komponenten (wie unseren Eingabegruppen, Schaltflächengruppen usw.) zu vermeiden.
• Das Auslösen von Popovern auf ausgeblendeten Elementen funktioniert nicht.
• Popover für .disabledoder disabled-Elemente müssen auf einem Wrapper-Element ausgelöst werden.
• Wenn sie von Ankern ausgelöst werden, die sich über mehrere Zeilen erstrecken, werden Popover zwischen der Gesamtbreite der Anker zentriert. Verwenden Sie .text-nowrapauf Ihren <a>s, um dieses Verhalten zu vermeiden.
• Popover müssen ausgeblendet werden, bevor die entsprechenden Elemente aus dem DOM entfernt wurden.
• Popovers können dank eines Elements in einem Shadow-DOM ausgelöst werden.

Lesen Sie weiter, um zu sehen, wie Popovers mit einigen Beispielen funktionieren.

Beispiel: Popovers überall aktivieren

Eine Möglichkeit, alle Popover auf einer Seite zu initialisieren, wäre, sie anhand ihres data-bs-toggleAttributs auszuwählen:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Beispiel: Verwendung der containerOption

Wenn Sie einige Stile auf einem übergeordneten Element haben, die ein Popover stören, sollten Sie einen benutzerdefinierten Stil angeben container, damit der HTML-Code des Popovers stattdessen in diesem Element angezeigt wird.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Beispiel

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Vier Richtungen

Vier Optionen sind verfügbar: oben, rechts, unten und links ausgerichtet. Wegbeschreibungen werden bei Verwendung von Bootstrap in RTL gespiegelt.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Beim nächsten Klick schließen

Verwenden Sie den focusTrigger, um Popovers beim nächsten Klick des Benutzers auf ein anderes Element als das Umschaltelement zu schließen.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

Deaktivierte Elemente

Elemente mit dem disabledAttribut sind nicht interaktiv, was bedeutet, dass Benutzer sie nicht bewegen oder darauf klicken können, um ein Popover (oder einen Tooltip) auszulösen. Als Problemumgehung sollten Sie das Popover von einem Wrapper <div>oder auslösen <span>, idealerweise mit Tastatur-fokussierbar tabindex="0".

Bei deaktivierten Popover-Auslösern möchten Sie möglicherweise auch data-bs-trigger="hover focus", dass das Popover Ihren Benutzern als sofortiges visuelles Feedback angezeigt wird, da sie möglicherweise nicht erwarten, auf ein deaktiviertes Element zu klicken .

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Sass

Variablen

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Verwendungszweck

Popover über JavaScript aktivieren:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-bs-, wie in data-bs-animation="". Stellen Sie sicher, dass Sie den Falltyp des Optionsnamens von camelCase in kebab-case ändern, wenn Sie die Optionen über Datenattribute übergeben. data-bs-customClass="beautifier"Verwenden Sie beispielsweise anstelle von data-bs-custom-class="beautifier".

Verwenden der Funktion mitpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Methoden

Show

Zeigt das Popover eines Elements an. Kehrt zum Aufrufer zurück, bevor das Popover tatsächlich angezeigt wurde (dh bevor das shown.bs.popoverEreignis eintritt). Dies wird als „manuelles“ Auslösen des Popovers betrachtet. Popover, deren Titel und Inhalt beide keine Länge haben, werden nie angezeigt.

myPopover.show()

ausblenden

Blendet das Popover eines Elements aus. Kehrt zum Aufrufer zurück, bevor das Popover tatsächlich ausgeblendet wurde (dh bevor das hidden.bs.popoverEreignis eintritt). Dies wird als „manuelles“ Auslösen des Popovers betrachtet.

myPopover.hide()

Umschalten

Schaltet das Popover eines Elements um. Kehrt zum Aufrufer zurück, bevor das Popover tatsächlich angezeigt oder ausgeblendet wurde (dh bevor das shown.bs.popoveroder - hidden.bs.popoverEreignis eintritt). Dies wird als „manuelles“ Auslösen des Popovers betrachtet.

myPopover.toggle()

entsorgen

Verbirgt und zerstört das Popover eines Elements (entfernt gespeicherte Daten auf dem DOM-Element). Popover, die Delegierung verwenden (die mit der selectorOption erstellt werden ), können nicht einzeln auf untergeordneten Auslöserelementen zerstört werden.

myPopover.dispose()

ermöglichen

Gibt dem Popover eines Elements die Möglichkeit, angezeigt zu werden. Popover sind standardmäßig aktiviert.

myPopover.enable()

deaktivieren

Entfernt die Möglichkeit, das Popover eines Elements anzuzeigen. Das Popover kann nur angezeigt werden, wenn es wieder aktiviert wird.

myPopover.disable()

toggleEnabled

Schaltet die Fähigkeit um, das Popover eines Elements anzuzeigen oder auszublenden.

myPopover.toggleEnabled()

aktualisieren

Aktualisiert die Position des Popovers eines Elements.

myPopover.update()

bekomme Instanz

Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte Popover-Instanz abrufen können

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte Popover-Instanz abrufen oder eine neue erstellen können, falls sie nicht initialisiert wurde

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Veranstaltungen

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})