Source

Popovers

Dokumentation und Beispiele für das Hinzufügen von Bootstrap-Popovern, wie sie in iOS zu finden sind, zu jedem Element auf Ihrer Website.

Überblick

Wissenswertes zur Verwendung des Popover-Plugins:

  • Popovers verlassen sich zur Positionierung auf die Drittanbieterbibliothek Popper.js . Sie müssen popper.min.js vor bootstrap.js einfügen oder bootstrap.bundle.min.js/ verwenden bootstrap.bundle.js, das Popper.js enthält, damit Popovers funktionieren!
  • Popover erfordern das Tooltip-Plugin als Abhängigkeit.
  • Wenn Sie unser JavaScript aus der Quelle erstellenutil.js , ist .
  • 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.

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-toggleAttributs auszuwählen:

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

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.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Beispiel

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

Vier Richtungen

Vier Optionen sind verfügbar: oben, rechts, unten und links ausgerichtet.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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.

Spezifisches Markup für „Schließen beim nächsten Klick“ erforderlich

Für ein ordnungsgemäßes browser- und plattformübergreifendes Verhalten müssen Sie das <a>Tag verwenden, nicht das <button>Tag, und Sie müssen auch ein tabindexAttribut einschließen.

Unzulässiges Popover 
<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?">Dismissible popover</a>
$('.popover-dismiss').popover({
  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 auslösen <div>oder das deaktivierte Element <span>überschreiben .pointer-events

Bei deaktivierten Popover-Auslösern möchten Sie möglicherweise auch data-trigger="hover", 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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Verwendungszweck

Popover über JavaScript aktivieren:

$('#example').popover(options)

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-animation="".

Name Typ Standard Beschreibung
Animation boolesch Stimmt Wenden Sie einen CSS-Fade-Übergang auf das Popover an
Container Zeichenfolge | Element | FALSCH FALSCH

Hängt das Popover an ein bestimmtes Element an. Beispiel: container: 'body'. Diese Option ist besonders nützlich, da sie es Ihnen ermöglicht, das Popover im Fluss des Dokuments in der Nähe des auslösenden Elements zu positionieren – wodurch verhindert wird, dass das Popover während einer Fenstergrößenänderung vom auslösenden Element wegschwebt.
Inhalt Zeichenfolge | Element | Funktion ''

Standardinhaltswert, wenn data-contentdas Attribut nicht vorhanden ist.

Wenn eine Funktion angegeben wird, wird sie aufgerufen, wobei ihre thisReferenz auf das Element gesetzt wird, an das das Popover angehängt ist.
Verzögerung Zahl | Objekt 0

Verzögerung beim Anzeigen und Ausblenden des Popovers (ms) – gilt nicht für den manuellen Triggertyp

Wenn eine Nummer angegeben wird, wird die Verzögerung sowohl auf das Ausblenden als auch auf das Anzeigen angewendet

Objektstruktur ist:delay: { "show": 500, "hide": 100 }
html boolesch FALSCH Fügen Sie HTML in das Popover ein. Bei „false“ wird die Methode von jQuery textverwendet, um Inhalte in das DOM einzufügen. Verwenden Sie Text, wenn Sie sich Sorgen über XSS-Angriffe machen.
Platzierung Zeichenfolge | Funktion 'Rechts'

So positionieren Sie das Popover - auto | Nach oben | unten | links | Rechts.
Wenn autoangegeben wird, wird das Popover dynamisch neu ausgerichtet.

Wenn eine Funktion verwendet wird, um die Platzierung zu bestimmen, wird sie mit dem Popover-DOM-Knoten als erstem Argument und dem auslösenden Element-DOM-Knoten als zweitem Argument aufgerufen. Der thisKontext wird auf die Popover-Instanz gesetzt.
Wähler Zeichenfolge | FALSCH FALSCH Wenn ein Selektor bereitgestellt wird, werden Popover-Objekte an die angegebenen Ziele delegiert. In der Praxis wird dies verwendet, um dynamischen HTML-Inhalten das Hinzufügen von Popovern zu ermöglichen. Siehe dies und ein informatives Beispiel .
Schablone Schnur '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Basis-HTML, das beim Erstellen des Popovers verwendet werden soll.

Die Popovers titlewerden in die .popover-header.

Die Popovers contentwerden in die .popover-body.

.arrowwird zum Pfeil des Popovers.

Das äußerste Wrapper-Element sollte die .popoverKlasse haben.
Titel Zeichenfolge | Element | Funktion ''

Standardtitelwert, wenn titledas Attribut nicht vorhanden ist.

Wenn eine Funktion angegeben wird, wird sie aufgerufen, wobei ihre thisReferenz auf das Element gesetzt wird, an das das Popover angehängt ist.
Abzug Schnur 'klicken' Wie Popover ausgelöst wird – klicken Sie auf | schweben | Fokus | Handbuch. Sie können mehrere Auslöser passieren; Trennen Sie sie mit einem Leerzeichen. manualnicht mit anderen Triggern kombinierbar.
versetzt Zahl | Schnur 0 Versatz des Popovers relativ zu seinem Ziel. Weitere Informationen finden Sie in der Offset -Dokumentation von Popper.js .
FallbackPlatzierung Zeichenfolge | Reihe 'umdrehen' Geben Sie an, welche Position Popper beim Fallback verwenden wird. Weitere Informationen finden Sie in der Verhaltensdokumentation von Popper.js
Grenze Zeichenfolge | Element 'scrollParent' Überlaufbeschränkungsgrenze des Popovers. Akzeptiert die Werte von 'viewport', 'window', 'scrollParent', oder eine HTMLElement-Referenz (nur JavaScript). Weitere Informationen finden Sie in der Datei preventOverflow von Popper.js .

Datenattribute für einzelne Popover

Optionen für einzelne Popover können alternativ, wie oben erläutert, durch die Verwendung von Datenattributen spezifiziert werden.

Methoden

Asynchrone Methoden und Übergänge

Alle API-Methoden sind asynchron und starten einen Übergang . Sie kehren zum Aufrufer zurück, sobald der Übergang gestartet wird, aber bevor er endet . Außerdem wird ein Methodenaufruf einer Übergangskomponente ignoriert .

Weitere Informationen finden Sie in unserer JavaScript-Dokumentation.

$().popover(options)

Initialisiert Popover für eine Elementsammlung.

.popover('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 die Länge Null haben, werden nie angezeigt.

$('#element').popover('show')

.popover('hide')

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.

$('#element').popover('hide')

.popover('toggle')

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.

$('#element').popover('toggle')

.popover('dispose')

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

$('#element').popover('dispose')

.popover('enable')

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

$('#element').popover('enable')

.popover('disable')

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

$('#element').popover('disable')

.popover('toggleEnabled')

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

$('#element').popover('toggleEnabled')

.popover('update')

Aktualisiert die Position des Popovers eines Elements.

$('#element').popover('update')

Veranstaltungen

Ereignistyp Beschreibung
show.bs.popover Dieses Ereignis wird sofort ausgelöst, wenn die showInstanzmethode aufgerufen wird.
gezeigt.bs.popover Dieses Ereignis wird ausgelöst, wenn das Popover für den Benutzer sichtbar gemacht wurde (wartet auf den Abschluss der CSS-Übergänge).
hide.bs.popover Dieses Ereignis wird sofort ausgelöst, wenn die hideInstanzmethode aufgerufen wurde.
hidden.bs.popover Dieses Ereignis wird ausgelöst, wenn das Popover vor dem Benutzer ausgeblendet wurde (wartet, bis die CSS-Übergänge abgeschlossen sind).
inserted.bs.popover Dieses Ereignis wird nach dem show.bs.popoverEreignis ausgelöst, wenn die Popover-Vorlage zum DOM hinzugefügt wurde. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})