HTML `popover` globales Attribut

Das popover-Attribut kann einen der folgenden Werte annehmen:

"auto"

auto-Popovers können durch leichtes Entfernen („light dismissed“) geschlossen werden - das bedeutet, dass Sie das Popover durch Klicken außerhalb davon oder durch Drücken der Esc-Taste ausblenden können. Das Anzeigen eines auto-Popovers wird im Allgemeinen andere auto-Popovers schließen, die bereits angezeigt werden, es sei denn, sie sind verschachtelt.

Hinweis: Ein leerer Wert für popover, also popover oder popover="", entspricht dem Setzen auf popover="auto".

"hint" Experimentell

hint-Popovers schließen keine auto-Popovers, wenn sie angezeigt werden, aber sie schließen andere Hint-Popovers. Sie können leicht entfernt werden und reagieren auf Schließanforderungen.

"manual"

manual-Popovers können nicht leicht entfernt werden und werden nicht automatisch geschlossen. Popovers müssen ausdrücklich mithilfe deklarativer Anzeigen/Ausblenden/Wechselbuttons oder JavaScript angezeigt und geschlossen werden. Mehrere unabhängige manual-Popovers können gleichzeitig angezeigt werden.

Popover-Elemente sind über display: none verborgen, bis sie über ein aufrufendes/steuerndes Element geöffnet werden (z.B. ein <button> oder ein <input type="button"> mit einem popovertarget-Attribut) oder einen HTMLElement.showPopover()-Aufruf.

Wenn sie geöffnet sind, erscheinen Popover-Elemente über allen anderen Elementen in der Top-Schicht und werden nicht von den position- oder overflow-Stilen der übergeordneten Elemente beeinflusst.

Popovers im auto-Zustand können mithilfe zugeordneter Steuerungen (gekennzeichnet durch das popovertarget-Attribut) angezeigt und ausgeblendet und durch leichtes Entfernen (durch Klicken außerhalb des Popover-Bereichs, Öffnen eines anderen Popovers oder Drücken browser-spezifischer Mechanismen wie der Esc-Taste) geschlossen werden.

Im Allgemeinen kann nur ein auto-Popover gleichzeitig auf dem Bildschirm angezeigt werden – wenn ein zweites Popover angezeigt wird, während bereits eines angezeigt wird, wird das erste ausgeblendet. Die Ausnahme von dieser Regel besteht, wenn Sie verschachtelte Auto-Popovers haben. Siehe Verschachtelte Popovers für weitere Details.

Sie können auch über JavaScript gesteuert werden, zum Beispiel kann die HTMLElement.togglePopover()-Methode verwendet werden, um ein Popover zwischen angezeigt und verborgen umzuschalten.

Im Gegensatz dazu müssen manual-Popovers manuell angezeigt und ausgeblendet werden – sie schließen keine anderen Popovers, wenn sie angezeigt werden, und sie können nicht leicht entfernt werden. Dies ermöglicht Anwendungsfälle, in denen Sie mehrere Popovers gleichzeitig anzeigen möchten.

hint-Popovers schließen keine auto-Popovers, wenn sie angezeigt werden, aber sie schließen andere Hint-Popovers. Sie können leicht entfernt werden und reagieren auf Schließanforderungen.

Üblicherweise werden hint-Popovers als Antwort auf nicht klickbasierte JavaScript-Ereignisse wie mouseover/mouseout und focus/blur angezeigt und ausgeblendet. Das Klicken auf einen Button, um ein hint-Popover zu öffnen, würde ein geöffnetes auto-Popover leicht entfernen.

Für detaillierte Informationen zur Nutzung finden Sie auf der Popover API-Übersichtsseite.

Das folgende Beispiel rendert einen Button, der ein Popover-Element öffnet, wenn er aktiviert wird.

<button popovertarget="my-popover">Open Popover</button>

<div popover id="my-popover">Greetings, one and all!</div>

• Popover API
• popovertarget HTML-Attribut
• popovertargetaction HTML-Attribut
• ::backdrop CSS-Pseudoelement
• :popover-open CSS-Pseudoklasse