HTML-Popover-Global-Attribut

Wert

Das popover-Attribut kann einen der folgenden Werte annehmen:

"auto"

auto Popovers können durch "leichtes Verwerfen" geschlossen werden – das bedeutet, dass Sie das Popover ausblenden können, indem Sie außerhalb des Popovers klicken oder die Esc-Taste drücken. Das Anzeigen eines auto-Popovers wird im Allgemeinen andere auto-Popovers schließen, die bereits angezeigt werden, es sei denn, sie sind verschachtelt.

Hinweis: Das Setzen eines leeren Wertes 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 werden andere Hinweis-Popovers schließen. Sie können leicht verworfen werden und reagieren auf Schließen-Anfragen.

"manual"

manual Popovers können nicht durch "leichtes Verwerfen" geschlossen werden und werden nicht automatisch geschlossen. Popovers müssen explizit mit deklarativen Anzeigen/Verbergen/Umschalten-Buttons oder JavaScript angezeigt und geschlossen werden. Mehrere unabhängige manual-Popovers können gleichzeitig angezeigt werden.

Beschreibung

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

Wenn sie geöffnet sind, erscheinen Popover-Elemente über allen anderen Elementen in der obersten Ebene und werden nicht durch das Styling von übergeordneten Elementen wie position oder overflow beeinflusst.

Popovers, die den Zustand auto haben, können mit zugehörigen Steuerelementen (durch das Attribut popovertarget bezeichnet) gezeigt und versteckt werden und durch Klicken außerhalb des Popover-Bereichs, Öffnen eines anderen Popovers oder Drücken von browser-spezifischen Mechanismen wie der Esc-Taste "leicht verworfen" werden.

Im Allgemeinen kann nur ein auto-Popover gleichzeitig auf dem Bildschirm angezeigt werden — das Anzeigen eines zweiten Popovers, wenn bereits eines angezeigt wird, wird das erste ausblenden. Die Ausnahme zu dieser Regel ist, wenn Sie verschachtelte auto-Popovers haben. Siehe Verschachtelte Popovers für weitere Details.

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

Im Gegensatz dazu müssen manual Popovers manuell angezeigt und versteckt werden — sie schließen nicht automatisch andere Popovers, wenn sie angezeigt werden, und können nicht leicht verworfen werden. Dies ermöglicht Anwendungsfälle, bei denen Sie mehrere Popovers gleichzeitig anzeigen möchten.

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

Normalerweise werden hint-Popovers als Reaktion auf nicht-klick JavaScript-Ereignisse wie mouseover/mouseout und focus/blur angezeigt und verborgen. Das Klicken auf einen Button zum Öffnen eines hint-Popovers würde dazu führen, dass ein offenes auto-Popover leicht verworfen wird.

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

Beispiele

Das Folgende 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
• popovertarget HTML-Attribut
• popovertargetaction HTML-Attribut
• ::backdrop CSS-Pseudoelement
• :popover-open CSS-Pseudoklasse