Veröffentlicht: 26. Februar 2025
In Chrome 133 wird die vorhandene Pop-up-Funktion um einen neuen Modus erweitert:
popover="hint". Dieser vom Browser verwaltete Modus ermöglicht einen neuen Stapelkontext, der das Erstellen von Kurzinfos und ähnlichen kurzlebigen schwebenden Elementen vereinfacht. Es reduziert den Entwickleraufwand und behält gleichzeitig die Designflexibilität bei.
Einführung und Vorgeschichte
Mit der Popover API, die in Chrome 114 eingeführt wurde, können Sie barrierefreie schwebende Benutzeroberflächen wie Menüs und Kurzinfos erstellen. Standardmäßig übernimmt popover="auto" die Funktion zum Schließen von Pop-ups und die Fokusverwaltung für Sie, ohne dass zusätzliches Scripting erforderlich ist. Weitere Informationen finden Sie unter Popover API. Wenn ein popover="auto"-Pop-up geöffnet wird, werden alle anderen Pop-ups ohne übergeordnetes Element mit popover="auto" geschlossen. Das sorgt für eine ergonomische API, die das Sinnvollste tut.
Pop-ups, die andere Pop-ups schließen
<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>
In diesem Beispiel wird Pop-up 2 geöffnet, wenn Pop-up 1 geschlossen wird, da bei popover="auto" jeweils nur ein solches Pop-up geöffnet sein kann.
Dieses Verhalten funktioniert zwar gut für Menüs und Dialogfelder, kann aber zu Problemen führen, wenn mehrere Arten von frei schwebender Benutzeroberfläche nebeneinander existieren müssen. Beispielsweise kann es zu Konflikten kommen, wenn ein Menü und eine Kurzinfo, für die beide popover="auto" verwendet wird, geöffnet werden. Das mag eine ungewöhnliche Situation erscheinen, kommt aber in einer modernen Anwendungsoberfläche häufig vor. In der Kopfzeile von github.com werden beispielsweise Pop-ups sowohl für die Menüs als auch für die Kurzinfos verwendet, sodass beide unter bestimmten Bedingungen gleichzeitig sichtbar sind:
Eine Möglichkeit, dieses Problem zu lösen, besteht darin, popover="manual" für die Kurzinfoelemente zu verwenden. Dadurch lässt sich das Pop-over vollständig mit Scripting steuern. Das erfordert jedoch die Neuimplementierung des Stapelns, der leichten Schließung und der Fokusverwaltung – genau die Aufgaben, für die die Popover API entwickelt wurde. Deshalb haben wir nach Möglichkeiten gesucht, die API zu erweitern, um diese fehlende Funktion bereitzustellen.
Bei der Recherche unter Entwicklern haben wir zwei gängige Anwendungsfälle für Stapel identifiziert:
- Persistente Benutzeroberfläche: z. B. Menüs und Dialogfelder.
- Sitzungsspezifische Benutzeroberfläche: z. B. Kurzinfos und Kurzinfofelder.
Um beides zu ermöglichen, wird mit popover="hint" ein zweiter Stapel eingeführt, der sich von popover="auto" unterscheidet. So bleiben Menüs auch dann geöffnet, wenn Kurzinfos angezeigt werden.
Anstatt mehrere Stapelkontexte für verschiedene UI-Typen einzuführen, was im Grunde eine Neuentwicklung von z-index wäre, vereinfacht dieser Ansatz die Dinge, indem nur zwei allgemeine Kategorien definiert werden: persistente Benutzeroberfläche (auto) und sitzungsspezifische Benutzeroberfläche (hint). So wird ein Gleichgewicht zwischen Flexibilität und der Vermeidung derselben Probleme gefunden, die Sie vor der Verwendung von Pop-ups hatten.
Verhalten des neuen Werts
Sowohl popover="auto" als auch popover="hint" unterstützen das leichte Schließen. Das bedeutet, dass sie automatisch geschlossen werden, wenn der Nutzer außerhalb davon klickt oder auf der Tastatur die Esc drückt. In dieser Hinsicht sind beide Stile identisch.
Wenn andere Pop-ups zwangsweise ausgeblendet werden sollen, schließt popover="auto" beim Öffnen alle anderen auto- und hint-Pop-ups, damit immer nur ein solches Pop-up aktiv ist. Hiervon ausgenommen sind verschachtelte Pop-ups, wie unten erläutert. popover="hint" hingegen blendet nur andere hint-Pop-ups zwangsweise aus, sodass Menüs und Kurzinfos geöffnet bleiben und nebeneinander existieren können.
Am stärksten unterscheiden sie sich im Nesting-Verhalten. popover="auto" unterstützt das Verschachteln, sodass ein untergeordnetes Pop-over in einem übergeordneten Pop-over geöffnet bleiben kann. popover="hint" hat ein spezielles Verschachtelungsverhalten, wozu die separaten „Stapel“ dienen. Wenn sich ein hint-Pop-up in einem auto-Pop-up befindet, wird es dem auto-Stapel hinzugefügt, um die kontextbezogene Gruppierung beizubehalten. Das Pop-up bleibt also geöffnet, bis es durch andere auto- oder hint-Pop-ups zwangsweise ausgeblendet wird. Das sorgt für ein intuitives Verhalten, bei dem andere Menüs oder Pop-ups nicht durch Kurzinfos unterbrochen werden.
Für sehr unterschiedliche Anwendungsfälle gibt es schließlich immer popover="manual". Diese Funktion bietet keine vordefinierten Verhaltensweisen, sodass Sie die gewünschten Funktionen und Verhaltensweisen genau definieren können.
popover="auto"
|
popover="hint"
|
popover="manual"
|
|
|---|---|---|---|
| Licht ausschalten | Ja | Ja | Nein |
| Folgende Elemente werden ausgeblendet: | Nicht zusammenhängende auto und hint |
Nicht zugehörige hint |
Nichts |
| Verschachtelung: | Ja | Speziell (siehe oben) | – (kein Ausschalten per Licht) |
Trigger beim Bewegen des Mauszeigers
Ein gängiges UX-Muster ist es, dass Tooltips und Kurzinfos durch das Bewegen des Mauszeigers ausgelöst werden.
Wenn Sie den Mauszeiger für einen bestimmten Zeitraum auf ein Element bewegen, wird die Minikarte angezeigt. Derzeit muss dieses Verhalten über JavaScript implementiert werden, z. B. durch Hinzufügen von Listenern für die Ereignisse mouseenter und mouseleave. Es befindet sich jedoch eine weitere API in der Entwicklung, die das deklarative Auslösen von Hover-Ereignissen ermöglichen soll: die Interest Invokers API.
Diese API befindet sich noch in der Entwicklungsphase. Der allgemeine Ansatz besteht darin, vielen Elementtypen das Attribut interesttarget hinzuzufügen, das ein Hover-Trigger-Verhalten verleiht:
<a interesttarget="my-hovercard" href="...">
Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
This is the hovercard
</span>
Wenn Sie den Mauszeiger auf den Link <a> bewegen, wird das Pop-up my-hovercard automatisch angezeigt. Wenn Sie den Mauszeiger von diesem Element bewegen, wird das Pop-over ausgeblendet. Und das ganz ohne JavaScript!
Beispiele
<button>An interesting button</button>
<div popover="hint">More info about the button</div>
[popover] {
margin: 0;
inset: auto;
position-area: bottom right;
}
const button = document.querySelector('button');
const popover = document.querySelector('[popover]');
button.onmouseenter = () => {
setTimeout(() => {
popover.showPopover({source: button});
}, 500);
}
button.onmouseleave = () => {
setTimeout(() => {
popover.hidePopover();
}, 500);
}
In diesem Beispiel wird popover="hint" verwendet, um eine einfache Kurzinfo zu erstellen, die weitere Informationen zur Schaltfläche enthält, wenn der Mauszeiger darauf bewegt wird. Die Aktivierung durch Bewegen des Mauszeigers wird von Event-Handlern für mouseenter und mouseleave mit einer einfachen Verzögerung von 0,5 Sekunden bereitgestellt. Beachten Sie, dass einige Details in diesem Beispiel nicht berücksichtigt werden:
- Wenn Sie den Mauszeiger auf das Pop-over bewegen, wird das Pop-over nicht geschlossen, wenn Sie den Mauszeiger von einem auslösenden Element weg bewegen. So ist es beispielsweise nicht möglich, Text aus dem Pop-up-Fenster zu kopieren oder einzufügen.
- Es gibt keine „Entprellung“: Es reicht aus, den Mauszeiger nur einen kurzen Moment auf die Schaltfläche zu bewegen, um das Pop-over auszulösen, auch wenn der Mauszeiger schnell wieder weg bewegt wird, bevor die Verzögerung abgelaufen ist. In diesem Fall „blinkt“ die Kurzinfo, d. h., sie wird schnell geöffnet und geschlossen.
- Das Beispiel ist überhaupt nicht barrierefrei: Nutzer, die keine Maus verwenden, können nicht auf den Inhalt der Kurzinfo zugreifen.
Diese Mängel können mit zusätzlichem JavaScript behoben werden.
Beispielsweise müssten focus (oder keydown und keyup)) Ereignishandler hinzugefügt werden, um die Tastaturbasierte Aktivierung des Pop-ups zu unterstützen.
Eine Erklärung dazu, was Sie beachten müssen, damit die Kurzinfo barrierefrei ist, finden Sie in diesem Blogpost von Sarah Higley.
All diese und weitere Probleme werden automatisch deklarativ von der Interest Invokers API verarbeitet.
Weitere Informationen
Weitere Informationen finden Sie in der Erläuterung der Funktion oder in der HTML-Spezifikation.