Globales HTML-Attribut popover

Wert

Das popover-Attribut kann einen der folgenden Werte annehmen:

"auto"

auto-Popovers können "light dismissed" 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 in der Regel andere bereits angezeigte auto-Popovers schließen, 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"

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

"manual"

manual-Popovers können nicht "light dismissed" werden und werden nicht automatisch geschlossen. Popovers müssen explizit über deklarative An/Aus-Buttons oder JavaScript angezeigt und geschlossen werden. Mehrere unabhängige manual-Popovers können gleichzeitig angezeigt werden.

Beschreibung

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

Wenn sie geöffnet sind, erscheinen Popover-Elemente oberhalb aller anderen Elemente in der obersten Schicht und werden nicht durch die position- oder overflow-Stilierung der Elternelemente beeinflusst.

Popover, die den auto-Status haben, können mit zugehörigen Steuerungen (bezeichnet durch das popovertarget-Attribut) angezeigt und versteckt werden, und durch Klicken außerhalb des Popover-Bereichs, Öffnen eines anderen Popovers oder Drücken von browserspezifischen Mechanismen wie der Esc-Taste "light dismissed" 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 von 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 sichtbar und verborgen umzuschalten.

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

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

In der Regel werden hint-Popovers als Reaktion auf Nicht-Klick-JavaScript-Ereignisse wie mouseover/mouseout und focus/blur gezeigt und versteckt. Ein Klick auf einen Button, um ein hint-Popover zu öffnen, würde ein offenes auto-Popover dazu veranlassen, "light dismissed" zu werden.

Detaillierte Informationen zur Verwendung finden Sie auf der Popover API-Startseite.

Beispiele

Das folgende Beispiel zeigt 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