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 Drittanbieter-Bibliothek Popper . Sie müssen popper.min.js vor bootstrap.js einfügen oder
bootstrap.bundle.min.js
/ verwendenbootstrap.bundle.js
, das Popper enthält, damit Popovers funktionieren! - Popover erfordern das Tooltip-Plugin als Abhängigkeit.
- Wenn Sie unser JavaScript aus der Quelle erstellen
util.js
, ist . - Popover sind aus Leistungsgründen optional, Sie müssen sie also selbst initialisieren .
- Länge Null
title
undcontent
Werte 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
.disabled
oderdisabled
-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-nowrap
auf 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.
prefers-reduced-motion
Medienanfrage. Weitere Informationen finden Sie im Abschnitt zur
reduzierten Bewegung in unserer Dokumentation zur Barrierefreiheit .
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-toggle
Attributs auszuwählen:
$(function () {
$('[data-toggle="popover"]').popover()
})
Beispiel: Verwendung der container
Option
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="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
Beim nächsten Klick schließen
Verwenden Sie den focus
Trigger, 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 tabindex
Attribut einschließen.
<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 disabled
Attribut 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)
GPU-Beschleunigung
Popovers erscheinen auf Windows 10-Geräten aufgrund der GPU-Beschleunigung und einer geänderten System-DPI manchmal verschwommen. Die Problemumgehung dafür in v4 besteht darin, die GPU-Beschleunigung nach Bedarf für Ihre Popover zu deaktivieren.
Vorgeschlagene Lösung:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Popovers für Benutzer von Tastaturen und Hilfstechnologien funktionieren lassen
Damit Tastaturbenutzer Ihre Popover aktivieren können, sollten Sie sie nur zu HTML-Elementen hinzufügen, die traditionell über die Tastatur fokussierbar und interaktiv sind (z. B. Links oder Formularsteuerelemente). Obwohl beliebige HTML-Elemente (z. B. <span>
s) durch Hinzufügen des tabindex="0"
Attributs fokussierbar gemacht werden können, fügt dies potenziell lästige und verwirrende Tabstopps bei nicht interaktiven Elementen für Tastaturbenutzer hinzu, und die meisten Hilfstechnologien kündigen derzeit den Inhalt des Popovers in dieser Situation nicht an . Verlassen Sie sich außerdem nicht ausschließlich auf hover
den Auslöser für Ihre Popovers, da dies es Tastaturbenutzern unmöglich macht, sie auszulösen.
Obwohl Sie mit der Option reichhaltiges, strukturiertes HTML in Popover einfügen können, html
empfehlen wir Ihnen dringend, das Hinzufügen einer übermäßigen Menge an Inhalten zu vermeiden. Die Art und Weise, wie Popovers derzeit funktionieren, besteht darin, dass ihr Inhalt, sobald er angezeigt wird, mit dem aria-describedby
Attribut an das Auslöserelement gebunden ist. Infolgedessen wird der gesamte Inhalt des Popovers den Benutzern von Hilfstechnologien als ein langer, ununterbrochener Stream angekündigt.
Obwohl es möglich ist, auch interaktive Steuerelemente (z. B. Formularelemente oder Links) in Ihr Popover aufzunehmen (indem Sie diese Elemente zu den whiteList
zulässigen Attributen und Tags hinzufügen), beachten Sie außerdem, dass das Popover derzeit nicht die Reihenfolge des Tastaturfokus verwaltet. Wenn ein Tastaturbenutzer ein Popover öffnet, bleibt der Fokus auf dem auslösenden Element, und da das Popover normalerweise nicht unmittelbar auf den Auslöser in der Dokumentstruktur folgt, gibt es keine Garantie dafür, dass es sich vorwärts bewegt/drücktTABverschiebt einen Tastaturbenutzer in das Popover selbst. Kurz gesagt, das einfache Hinzufügen interaktiver Steuerelemente zu einem Popover macht diese Steuerelemente wahrscheinlich für Tastaturbenutzer und Benutzer von Hilfstechnologien unerreichbar/unbrauchbar oder sorgt zumindest für eine unlogische allgemeine Fokusreihenfolge. Erwägen Sie in diesen Fällen stattdessen die Verwendung eines modalen Dialogfelds.
Optionen
Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-
, wie in data-animation=""
.
sanitize
Beachten Sie, dass die Optionen ,
sanitizeFn
und
aus Sicherheitsgründen
whiteList
nicht mit Datenattributen angegeben werden können.
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: |
Inhalt | Zeichenfolge | Element | Funktion | '' | Standardinhaltswert, wenn Wenn eine Funktion angegeben wird, wird sie aufgerufen, wobei ihre |
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: |
html | boolesch | FALSCH | Fügen Sie HTML in das Popover ein. Bei „false“ wird die Methode von jQuery text verwendet, 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 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 |
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 Die Popovers
Das äußerste Wrapper-Element sollte die |
Titel | Zeichenfolge | Element | Funktion | '' | Standardtitelwert, wenn Wenn eine Funktion angegeben wird, wird sie aufgerufen, wobei ihre |
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. manual nicht 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 . |
FallbackPlatzierung | Zeichenfolge | Reihe | 'umdrehen' | Geben Sie an, welche Position Popper beim Fallback verwenden wird. Weitere Informationen finden Sie in der Verhaltensdokumentation von Popper |
customClass | Zeichenfolge | Funktion | '' | Fügen Sie dem Popover Klassen hinzu, wenn es angezeigt wird. Beachten Sie, dass diese Klassen zusätzlich zu allen in der Vorlage angegebenen Klassen hinzugefügt werden. Um mehrere Klassen hinzuzufügen, trennen Sie sie durch Leerzeichen: Sie können auch eine Funktion übergeben, die einen einzelnen String mit zusätzlichen Klassennamen zurückgeben soll. |
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 PreventOverflow -Dokumentation von Popper . |
desinfizieren | boolesch | Stimmt | Aktivieren oder deaktivieren Sie die Bereinigung. Wenn aktiviert 'template' , werden 'content' und 'title' Optionen bereinigt. Weitere Informationen finden Sie im Abschnitt Desinfektionsmittel in unserer JavaScript-Dokumentation . |
weiße Liste | Objekt | Standardwert | Objekt, das erlaubte Attribute und Tags enthält |
desinfizierenFn | null | Funktion | Null | Hier können Sie Ihre eigene Desinfektionsfunktion bereitstellen. Dies kann nützlich sein, wenn Sie es vorziehen, eine dedizierte Bibliothek zur Durchführung der Bereinigung zu verwenden. |
popperConfig | null | Objekt | Null | Um die standardmäßige Popper-Konfiguration von Bootstrap zu ändern, siehe Poppers Konfiguration |
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.popover
Ereignis eintritt). Dies wird als „manuelles“ Auslösen des Popovers betrachtet. Popover, deren Titel und Inhalt beide keine Länge 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.popover
Ereignis 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.popover
oder - hidden.bs.popover
Ereignis 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 selector
Option 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 show Instanzmethode 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 hide Instanzmethode 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.popover Ereignis ausgelöst, wenn die Popover-Vorlage zum DOM hinzugefügt wurde. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})