Daspopover-Globalattribut wird verwendet, um ein Element als Popover-Element zu kennzeichnen.

Wert

Daspopover-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 derEsc-Taste verbergen können. Das Anzeigen einesauto-Popovers wird im Allgemeinen andere bereits angezeigteauto-Popovers schließen, es sei denn, sie sind geschachtelt.

Hinweis:Das Setzen eines leeren Werts fürpopover —popover oderpopover="" — entspricht dem Setzen vonpopover="auto".

"hint"Experimentell

hint-Popovers schließen keineauto-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ängigemanual-Popovers können gleichzeitig angezeigt werden.

Beschreibung

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

Wenn sie geöffnet sind, erscheinen Popover-Elemente über allen anderen Elementen in derobersten Schicht und werden nicht von denposition- oderoverflow-Stilen der übergeordneten Elemente beeinflusst.

Popovers, die sich imauto-Zustand befinden, können mit zugeordneten Steuerelementen (festgelegt durch daspopovertarget-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 derEsc-Taste "leicht geschlossen" werden.

Im Allgemeinen kann nur einauto-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 unterGeschachtelte Popovers.

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

Im Gegensatz dazu müssenmanual-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 keineauto-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 wiemouseover/mouseout undfocus/blur ein- und ausgeblendet. Ein Button-Klick zum Öffnen eineshint-Popovers würde ein geöffnetesauto-Popover leicht schließen.

Für detaillierte Informationen zur Verwendung siehe diePopover-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>Greetings, one and all!</div>

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Popover-API
• HTML-Attributpopovertarget
• HTML-Attributpopovertargetaction
• ::backdrop CSS-Pseudoelement
• :popover-open CSS-Pseudoklasse