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 einfügen bootstrap.jsoder eine verwenden, bootstrap.bundle.min.jsdie Popper enthält.
• Popover erfordern das Popover-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.

Beispiele

Popover aktivieren

Wie oben erwähnt, müssen Sie Popover initialisieren, bevor sie verwendet werden können. Eine Möglichkeit, alle Popover auf einer Seite zu initialisieren, wäre, sie anhand ihres data-bs-toggleAttributs auszuwählen, etwa so:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Live-Demo

Wir verwenden JavaScript ähnlich dem obigen Snippet, um das folgende Live-Popover zu rendern. Titel werden über festgelegt data-bs-titleund Textinhalte werden über festgelegt data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-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. Wegbeschreibungen werden bei Verwendung von Bootstrap in RTL gespiegelt. Stellen Sie data-bs-placementein, um die Richtung zu ändern.

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

Brauchcontainer

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. Dies ist in responsiven Tabellen, Eingabegruppen und dergleichen üblich.

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

Eine andere Situation, in der Sie eine explizite Benutzerdefiniert festlegen möchten, containersind Popover in einem modalen Dialog , um sicherzustellen, dass das Popover selbst an das Modal angehängt wird. Dies ist besonders wichtig für Popover, die interaktive Elemente enthalten – modale Dialoge fangen den Fokus ein, sodass Benutzer diese interaktiven Elemente nicht fokussieren oder aktivieren können, es sei denn, das Popover ist ein untergeordnetes Element des Modals.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Benutzerdefinierte Popover

Sie können das Erscheinungsbild von Popovern mithilfe von CSS-Variablen anpassen . Wir legen eine benutzerdefinierte Klasse mit fest data-bs-custom-class="custom-popover", um unser benutzerdefiniertes Erscheinungsbild zu erweitern, und verwenden sie, um einige der lokalen CSS-Variablen zu überschreiben.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</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" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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>

CSS

Variablen

Als Teil des sich entwickelnden CSS-Variablen-Ansatzes von Bootstrap verwenden Popovers jetzt lokale CSS-Variablen .popoverfür eine verbesserte Echtzeit-Anpassung. Die Werte für die CSS-Variablen werden über Sass festgelegt, sodass die Sass-Anpassung auch weiterhin unterstützt wird.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Sass-Variablen

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Verwendungszweck

Popover über JavaScript aktivieren:

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

Optionen

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

Ab Bootstrap 5.2.0 unterstützen alle Komponenten ein experimentelles reserviertes Datenattribut, das eine data-bs-configeinfache Komponentenkonfiguration als JSON-String enthalten kann. Wenn ein Element über data-bs-config='{"delay":0, "title":123}'und data-bs-title="456"-Attribute verfügt, ist der endgültige titleWert 456und die separaten Datenattribute überschreiben die auf angegebenen Werte data-bs-config. Darüber hinaus können vorhandene Datenattribute JSON-Werte wie data-bs-delay='{"show":0,"hide":150}'.

Verwenden der Funktion mitpopperConfig

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

Methoden

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Veranstaltungen

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