HTML popover globales Attribut

Das popover-Attribut kann einen der folgenden Werte annehmen:

"auto"

auto Popover können "leicht verworfen" werden – das bedeutet, dass Sie das Popover verbergen können, indem Sie außerhalb davon klicken oder die Esc-Taste drücken. Das Anzeigen eines auto Popovers wird in der Regel andere auto Popovers schließen, die bereits angezeigt werden, es sei denn, sie sind verschachtelt.

Hinweis: Das Setzen eines leeren Werts für popover — popover oder popover="" — ist gleichbedeutend mit dem Setzen von popover="auto".

"hint" Experimentell

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

"manual"

manual Popovers können nicht "leicht verworfen" werden und werden nicht automatisch geschlossen. Popovers müssen explizit mit deklarativen Anzeigen/Verbergen/Umschalt-Schaltflächen oder JavaScript angezeigt und geschlossen werden. Mehrere unabhängige manual Popovers können gleichzeitig angezeigt werden.

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

Wenn geöffnet, erscheinen Popover-Elemente über allen anderen Elementen in der obersten Ebene und werden nicht von den position oder overflow Stileigenschaften der Elternelemente beeinflusst.

Popover, die den auto Zustand haben, können über zugeordnete Steuerelemente (angegeben durch das popovertarget Attribut) ein- und ausgeblendet und durch Klicken außerhalb des Popover-Bereichs, das Öffnen eines anderen Popovers oder Drücken von browserspezifischen Mechanismen wie der Esc-Taste "leicht verworfen" werden.

In der Regel kann nur ein auto Popover gleichzeitig auf dem Bildschirm angezeigt werden – das Anzeigen eines zweiten Popovers, wenn bereits eins angezeigt wird, blendet das erste aus. Die Ausnahme zu dieser Regel ist, wenn Sie verschachtelte auto Popovers haben. Weitere Details finden Sie unter Verschachtelte Popovers.

Sie können auch mit 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 ein- und ausgeblendet werden — sie schließen nicht automatisch andere Popovers, wenn sie angezeigt werden, und können nicht leicht verworfen werden. Dies erlaubt Anwendungsfälle, bei denen Sie mehrere Popovers gleichzeitig anzeigen möchten.

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

In der Regel werden hint Popovers als Reaktion auf nicht-klickende JavaScript-Ereignisse wie mouseover/mouseout und focus/blur ein- und ausgeblendet. Das Klicken auf eine Schaltfläche zum Öffnen eines hint Popovers würde dazu führen, dass ein geöffnetes auto Popover leicht verworfen wird.

Für detaillierte Informationen zur Nutzung siehe die Popover API Startseite.

Das Folgende rendert eine Schaltfläche, die ein Popover-Element öffnet, wenn sie 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