HTML-Popover-Globalattribut

Wert

Das popover-Attribut kann einen der folgenden Werte annehmen:

"auto"

auto-Popovers können "leicht geschlossen" werden – das bedeutet, dass Sie das Popover durch Klicken außerhalb davon oder Drücken der Esc-Taste verbergen können. Das Anzeigen eines auto-Popovers wird im Allgemeinen andere bereits angezeigte auto-Popovers schließen, es sei denn, sie sind geschachtelt.

Hinweis: Das Setzen eines leeren Werts für popover — popover oder popover="" — entspricht dem Setzen von 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 geschlossen werden und reagieren auf Schließanforderungen.

"manual"

manual-Popovers können nicht "leicht geschlossen" werden und werden nicht automatisch geschlossen. Popovers müssen explizit über deklarative Show/Hide/Toggle-Buttons oder JavaScript angezeigt und geschlossen werden. Mehrere unabhängige manual-Popovers können gleichzeitig angezeigt werden.

Beschreibung

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

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

Popovers, die sich im auto-Zustand befinden, können mit zugeordneten Steuerelementen (festgelegt durch das popovertarget-Attribut) ein- und ausgeblendet werden und durch Klicken außerhalb des Popover-Bereichs, Öffnen eines anderen Popovers oder das Drücken von browserspezifischen Mechanismen wie der Esc-Taste "leicht geschlossen" werden.

Im Allgemeinen kann nur ein auto-Popover gleichzeitig auf dem Bildschirm angezeigt werden – wenn ein zweites Popover angezeigt wird, während ein anderes bereits angezeigt wird, wird das erste Popover verborgen. Die Ausnahme von dieser Regel ist, wenn Sie geschachtelte Auto-Popovers haben. Weitere Details finden Sie unter Geschachtelte Popovers.

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

Im Gegensatz dazu müssen manual-Popovers manuell angezeigt und verborgen werden – sie schließen nicht automatisch andere Popovers, wenn sie angezeigt werden, und können nicht leicht geschlossen 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 geschlossen werden und reagieren auf Schließanforderungen.

Hint-Popovers werden normalerweise als Reaktion auf nicht-klickbezogene JavaScript-Ereignisse wie mouseover/mouseout und focus/blur ein- und ausgeblendet. Ein Button-Klick zum Öffnen eines hint-Popovers würde ein geöffnetes auto-Popover leicht schließen.

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

Beispiele

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>

Spezifikationen

Browser-Kompatibilität

Siehe auch

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