Pop-over und Dialogfeld

Ein Pop-over ist ein beliebiges Element mit dem Attribut popover. Es ist für eine Vielzahl von interaktiven Mustern nützlich, darunter Tooltips, Benachrichtigungen und Pop-up-Meldungen.

<div id="my-popover" popover>My popover content</div>

Mit dem Attribut popover wird das Element standardmäßig ausgeblendet. Sie müssen Nutzern eine Möglichkeit bieten, es zu öffnen. Pop-overs werden zwar in der obersten Ebene über allen anderen Inhalten platziert, sind aber nicht modal. Das bedeutet, dass Sie weiterhin mit Inhalten außerhalb des Pop-overs interagieren können.

Popover steuern

Bevor wir uns die verschiedenen Arten von Pop-overs und ihr Verhalten ansehen, wollen wir uns ansehen, wie Sie Pop-overs öffnen und schließen.

Deklarativ

Popovers können vollständig in HTML gesteuert werden, ohne dass JavaScript erforderlich ist. Dazu werden Schaltflächen (und Eingaben mit dem Typ button) und das Attribut popovertarget verwendet.

Das Pop-over im vorherigen Code-Snippet hat ein id von my-popover. Sie können es verwenden, um auf das Pop-over zu verweisen.

<button popovertarget="my-popover">Toggle</button>

Sie können auch angeben, ob ein Popover mit einer Schaltfläche geöffnet oder geschlossen werden soll. Verwenden Sie dazu popovertargetaction="show" und popovertargetaction="hide".

Mit JavaScript

Sie können ein Popover auch mit JavaScript steuern. Das ist nützlich, wenn Sie ein Popover als Reaktion auf etwas anderes als einen Klick auf eine Schaltfläche durch einen Nutzer anzeigen möchten. Dazu müssen Sie das Popover-Element abrufen und dann showPopover(), hidePopover() oder togglePopover() aufrufen.

Arten von Pop-overs

Wenn Sie Ihrer Website ein Pop-over hinzufügen, müssen Sie viele Interaktionen berücksichtigen. Wie wird sie geöffnet? Wie können Nutzer sie schließen? Was passiert mit anderen geöffneten Pop-overs? Es gibt drei Arten von Pop-overs. Sie können den Typ auswählen, der das Verhalten und die Interaktionen bietet, die für Ihren Anwendungsfall erforderlich sind.

Automatische Pop-overs

Automatische Pop-over-Fenster bieten die meisten integrierten Funktionen und sind die Standardeinstellung, wenn Sie keinen Typ angeben.

<div id="popover" popover>My popover</div>

In vielen Fällen möchten Sie nicht, dass mehrere Pop-overs gleichzeitig geöffnet sind. Daher werden andere automatische Pop-overs geschlossen, wenn ein automatisches Pop-over geöffnet wird. Außerdem unterstützen sie „Light Dismiss“. Das bedeutet, dass das Pop-over automatisch geschlossen wird, wenn Sie außerhalb des Pop-overs klicken. Sie kann auch mit der Esc-Taste geschlossen werden.

Manuelle Pop-overs

Das automatische Einblenden von Pop-overs deckt viele Anwendungsfälle ab. Es gibt jedoch Fälle, in denen Sie mehr Kontrolle über Ihre Pop-overs benötigen. Bei manuellen Pop-overs haben Sie viel mehr Kontrolle und sind auch für einen Großteil des Verhaltens verantwortlich.

<div id="popover" popover="manual">My popover</div>

Dieses Pop-over wird nur geschlossen, wenn Sie es explizit schließen. Es kann nicht durch leichtes Schließen oder die Esc-Taste geschlossen werden. Sie können jedoch mehrere Pop-overs gleichzeitig öffnen.

Hinweis-Pop-overs

Sie können auch Pop-overs verwenden, um Tooltips auf Ihrer Seite hinzuzufügen. In diesem Muster soll es möglich sein, den Mauszeiger auf ein Element zu bewegen, um eine Beschreibung zu sehen. Es sollte immer nur eines geöffnet sein. Wenn Sie automatische Pop-overs verwenden, wird durch das Öffnen eines Pop-overs jedes andere geöffnete automatische Pop-over geschlossen. Wenn Sie manuelle Pop-overs verwenden, müssen Sie viele Verhaltensweisen manuell implementieren, einschließlich des Schließens anderer Pop-overs. Hinweis-Pop-overs bieten eine dritte Option mit einem ähnlichen Verhalten wie automatische Pop-overs. Wenn Sie jedoch ein Hinweis-Popover öffnen, werden automatische Popovers nicht geschlossen.

<div id="popover" popover="hint">My popover</div>

Hinweis-Pop-ups sind nützlich für zusätzliche Informationen, die sekundär zum primären Inhalt sind. Oftmals sollen Hinweis-Pop-ups durch Ereignisse ausgelöst werden, die nicht mit einem Klick verbunden sind, z. B. durch Hover oder Fokus.

Popover positionieren

Standardmäßig werden Pop-overs in der Mitte des Bildschirms geöffnet. Sie werden der obersten Ebene über allen anderen Inhalten hinzugefügt und können relativ zum Darstellungsbereich positioniert werden.

Das ist nicht immer ideal, da Sie das Pop-over oft in der Nähe des Elements platzieren möchten, das es auslöst. Mit der Ankerpositionierung ist das möglich.

Die Ankerpositionierung erfolgt in zwei Schritten: Sie definieren das Ankerelement und platzieren Ihr Element relativ zu diesem Anker. Pop-overs können den ersten Schritt übernehmen, indem sie einen impliziten Anker für Sie festlegen. Wenn Sie ein Pop-over mit <button popovertarget> öffnen, ist die Schaltfläche der implizite Anker. Wenn Sie ein Pop-over mit JavaScript öffnen, können Sie den impliziten Anker mit der Option source festlegen.

Standardmäßig wird ein Pop-over mit margin: auto zentriert. Wenn Sie die Ankerpositionierung verwenden möchten, müssen Sie diese Einstellung wahrscheinlich mit margin: unset überschreiben.

Stile und Animationen

Das Pseudoelement „::backdrop“

Pop-overs werden in einer oberen Ebene über allen anderen Inhalten auf Ihrer Seite geöffnet. Unter dem Pop-over befindet sich ein ::backdrop-Pseudoelement, das formatiert werden kann.

Wichtig ist, dass der Inhalt außerhalb eines Popovers nicht inaktiv ist. Sie können weiterhin auf Schaltflächen klicken und die Tastatur verwenden, um auf der Seite zu navigieren. Die Seiteninhalte dürfen nicht verdeckt werden, z. B. durch einen starken Weichzeichner-Effekt oder einen undurchsichtigen Hintergrund.

Die Pseudoklasse :popover-open

Angenommen, Sie möchten den Inhalt Ihres Pop-overs mit CSS-Rastern gestalten. Sie fügen [popover]{ display: grid } hinzu und plötzlich sind alle Pop-overs sichtbar. Das liegt daran, dass Pop-overs mit display: none ausgeblendet werden. Mit der Pseudoklasse :popover-open können Sie Stile nur anwenden, wenn das Pop-over geöffnet ist.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open ist auch nützlich, wenn Sie ein Pop-over animieren.

Popovers animieren

Die Animation eines Pop-overs umfasst drei Schritte:

1. @starting-style {popover:popover-open { } }: Die anfänglichen Formatierungen für das Pop-over, sobald es sichtbar ist. Dieser Wert muss in Ihrem Stylesheet nach Schritt 2 definiert werden.
2. popover:popover-open { }– Die Formatierungen für das Pop-over, wenn es geöffnet ist.
3. popover { }: Die Formatierungen, die das Pop-over beim Schließen annimmt.

Ein Pop-over wird mit display: none ausgeblendet, wenn es nicht geöffnet ist. Um dies zu animieren, müssen Sie transition-behavior: allow-discrete festlegen und display der Liste der Properties in transition hinzufügen.

Wenn Sie das Pop-over mit einem impliziten Anker positionieren, müssen Sie auch overlay in die Liste der Eigenschaften in transition aufnehmen. Die implizite Ankerbeziehung wird entfernt, sobald das Pop-over aus der obersten Ebene entfernt wird. Wenn Sie der overlay-Eigenschaft eine Übergangseigenschaft hinzufügen, wird das Entfernen verzögert, bis der Übergang beendet ist.

Interaktionen zwischen Pop-overs

Auf einer Seite sind wahrscheinlich mehrere Pop-overs vorhanden. Wie sie interagieren, hängt von ihrem Typ und ihrer Verwendung ab.

Verschachtelte Pop-overs

In einigen Fällen müssen Sie ein Popover in einem anderen Popover öffnen. Sie haben beispielsweise ein Pop-over-Menü und eines der Menüelemente öffnet ein Untermenü. Wenn der Nutzer das Hauptmenü schließt, soll das Untermenü nicht geöffnet bleiben. Pop-overs können dabei helfen, das automatisch zu erledigen.

Wenn Sie ein Hinweis-Popover über ein Hinweis-Popover oder ein automatisches Popover über ein automatisches Popover öffnen, werden die Popovers in einem Stapel platziert. Wenn Sie ein Pop-over schließen, werden auch alle Pop-over danach im Stapel geschlossen. Das funktioniert auch mit dem leichten Schließen: Wenn Sie auf ein Popover klicken, werden alle Popovers danach im Stapel geschlossen, aber frühere Popovers bleiben geöffnet.

Ein Pop-over wird dem Stapel hinzugefügt, wenn sich sein Quellelement in einem Pop-over befindet. Das Quellelement wird automatisch festgelegt, wenn Sie popovertarget für eine Schaltfläche verwenden oder mit JavaScript die Option source beim Aufrufen von .showPopover({source}) oder .togglePopover({source}) festlegen.

Es gibt einen Stapel für automatische Pop-overs und einen separaten Stapel für Hinweis-Pop-overs. Wenn Sie jedoch ein Hinweis-Popover aus einem Auto-Popover heraus öffnen, wird es dem Auto-Stack hinzugefügt.

Hinweis-Pop-overs sind für einfache, vorübergehende Informationen vorgesehen. Daher können Sie kein automatisches Pop-over über ein Hinweis-Pop-over auslösen.

Wenn Sie manuelle Pop-ups verwenden, müssen Sie das alles manuell verwalten.

Andere Popover-Typen schließen

Sie haben gelernt, dass beim Öffnen eines automatischen Pop-over andere automatische Pop-over geschlossen werden. Wie interagieren die verschiedenen Typen? Sehen Sie sich ein Beispiel für eine Seite an, auf der alle drei Typen verwendet werden. Es gibt ein Navigationsmenü mit Schaltflächen, die automatisch ein Pop-over-Fenster öffnen und schließen. Auf der Seite wird Text angezeigt, in dem Hinweis-Pop-overs verwendet werden, um kontextbezogene Tooltips zu präsentieren. Schließlich wird ein Hinweis mit einem manuellen Pop-over angezeigt, um den Nutzer darüber zu informieren, dass eine Hintergrundaufgabe abgeschlossen wurde.

Die Kurzinfos sind temporär und werden angezeigt, wenn wir den Mauszeiger auf den Text bewegen. Es sollte immer nur ein Tooltip sichtbar sein. Wenn ein zweiter Hinweis-Pop-over ausgelöst wird, wird der erste geschlossen.

Wenn Sie das Menü durch Klicken auf eine Schaltfläche öffnen, wird der Hinweis aus zwei Gründen geschlossen. Zuerst wird durch den Klick außerhalb des Hinweises ein leichter Schließen-Vorgang ausgelöst. Zweitens werden durch das Öffnen eines automatischen Pop-overs alle geöffneten Hinweis-Pop-overs geschlossen. Das liegt daran, dass sich der Fokus des Nutzers geändert hat und die kurzlebigen Inhalte in einem Hinweis-Pop-over nicht mehr relevant sind. Wenn Sie showPopover() für ein automatisch eingeblendetes Pop-over aufrufen, werden alle geöffneten Hinweis-Pop-overs geschlossen.

Die Drop-down-Menüs sind automatische Pop-overs. Bei Drop-down-Menüs wird erwartet, dass jeweils nur eines geöffnet ist. Wenn Sie eines öffnen, wird das andere geschlossen. Wie Sie gesehen haben, werden beim Öffnen eines automatischen Popovers auch alle geöffneten Hinweis-Popovers geschlossen.

Wenn ein Drop-down-Menü geöffnet ist, möchten Sie möglicherweise trotzdem den Inhalt eines nicht zugehörigen Tooltips sehen. Wenn ein Hinweis-Tooltip angezeigt wird, werden automatische Pop-overs nicht geschlossen.

Das manuelle Pop-over ist von den automatischen Pop-overs oder Hinweis-Pop-overs nicht betroffen. Wenn es geöffnet wird, werden keine Hinweis-Pop-overs oder automatischen Pop-overs geschlossen. Wenn Sie jedoch ein manuelles Popover durch Klicken auf eine Schaltfläche öffnen, wird dadurch ein Light Dismiss von Hinweis- und Auto-Popovers ausgelöst.

Die Interaktionen zwischen den Pop-over-Typen mögen komplex erscheinen, ermöglichen aber gängige Nutzungsmuster, wenn Sie die Typen in den richtigen Situationen verwenden. Wenn Ihre Pop-overs nicht wie erwartet interagieren, sollten Sie noch einmal überprüfen, welche Typen Sie verwenden.

Wissen testen