Implementierung von Popover-Funktionen mit der Popover API

Zusammenfassung der wichtigsten Inhalte der Popover API

Einführung in die Popover API

• Die Popover API bietet Entwicklern einen standardisierten, konsistenten und flexiblen Mechanismus, um Popover-Inhalte über dem Seiteninhalt anzuzeigen
• Popover-Inhalte können deklarativ über HTML-Attribute oder über JavaScript gesteuert werden

Merkmale und Verwendung von Popovers

• Popovers werden in zwei Arten unterteilt: modal und nicht-modal. Mit der Popover API erzeugte Popovers sind immer nicht-modal
  • Modal bedeutet, dass der Rest der Seite während der Anzeige des Popovers als nicht interaktiv dargestellt wird
  • Nicht-modal bedeutet, dass während der Anzeige des Popovers weiterhin mit dem Rest der Seite interagiert werden kann
• Typische Anwendungsfälle für Popovers sind Aktionsmenüs, benutzerdefinierte "Toast"-Benachrichtigungen, Vorschläge für Formularelemente, Inhaltsauswähler oder didaktische UI
• Popovers können deklarativ über HTML-Attribute oder über die JavaScript-API erstellt werden

HTML-Attribute im Zusammenhang mit der Popover API

• popover: globales Attribut, das ein Element in ein Popover-Element umwandelt
• popovertarget: wandelt ein <button>- oder <input>-Element in eine Schaltfläche zur Steuerung eines Popovers um
• popovertargetaction: gibt die Aktion an, die auf dem Popover-Element ausgeführt wird, das von dem steuernden <button> oder <input> kontrolliert wird

CSS-Funktionen im Zusammenhang mit der Popover API

• ::backdrop: ein Vollbild-Element, das direkt hinter dem Popover-Element platziert wird und bei Bedarf Effekte auf den Seiteninhalt hinter dem Popover anwenden kann
• :popover-open: eine Pseudoklasse, die nur dann zutrifft, wenn sich das Popover-Element im angezeigten Zustand befindet, und zum Stylen des Popover-Elements während der Anzeige verwendet werden kann

Schnittstellen und Erweiterungen im Zusammenhang mit der Popover API

• ToggleEvent: stellt ein Ereignis dar, das den Nutzer informiert, wenn der Zustand eines Popover-Elements zwischen angezeigt und verborgen wechselt
• Instanzeigenschaften wie HTMLElement.popover, HTMLButtonElement.popoverTargetElement, HTMLInputElement.popoverTargetElement, HTMLButtonElement.popoverTargetAction, HTMLInputElement.popoverTargetAction wurden hinzugefügt
• Instanzmethoden wie HTMLElement.hidePopover(), HTMLElement.showPopover(), HTMLElement.togglePopover() wurden hinzugefügt
• Die Ereignisse beforetoggle und toggle wurden hinzugefügt

Meinung von GN⁺

• Die Popover API ist insofern bedeutsam, als sie Webentwicklern eine standardisierte Methode bietet, Popover-UIs einfach zu implementieren. Bisher musste dafür eine Bibliothek verwendet oder eine eigene Implementierung erstellt werden
• Allerdings sollte berücksichtigt werden, dass die Popover API noch experimentell ist und die Browser-Unterstützung begrenzt bleibt. Für den Einsatz in Produktionsumgebungen kann es sinnvoll sein, den parallelen Einsatz von Polyfills oder bestehenden Bibliotheken zu prüfen
• Bibliotheken mit ähnlicher Funktionalität sind unter anderem die Popover-Komponente von Bootstrap und Tippy.js
• Bei der Verwendung der Popover API sollten auch Aspekte der Barrierefreiheit berücksichtigt werden. Das Popover sollte per Tastatur steuerbar sein, und für Screenreader-Nutzer sollten Alternativtexte bereitgestellt werden

[GN⁺]

Hacker-News-Kommentare

Zusammengefasst ergibt sich Folgendes.

• Sobald CSS Anchor Positioning eingeführt wird, lässt sich in Kombination mit der Popover API auf deklarative Weise ein benutzerdefinierter Tooltip oder ein Kontextmenü umsetzen, sodass Bibliotheken wie PopperJS überflüssig werden könnten.
• Wenn man einen modalen Dialog möchte, kann man auch das Element <dialog> verwenden.
• Derzeit haben Popovers Implementierungsgrenzen, weil sie sich zum Beispiel nicht über die Grenzen des Browserfensters hinaus bewegen können und nicht gut mit dem Windowing-System des Host-Betriebssystems integriert sind. Um das sauber umzusetzen, wäre unter Win32 vermutlich für jedes Popover ein eigenes HWND und unter macOS eine NSView nötig.
• Es ist schon ironisch, dass Browser Popup-Blocker haben und gleichzeitig solche APIs bauen. Das erinnert an die Popup-/Pop-under-Werbekriege der späten 90er- und frühen 2000er-Jahre.
• Mit der Popover API dürfte es für Erweiterungen einfacher werden, diese gezielt zu blockieren. Wahrscheinlich wird sie vor allem für Dinge genutzt, die Nutzer nicht mögen, etwa Marketing-CTAs oder aufdringliche Support-Chats.
• Wenn man ein Popover modal machen will, heißt es, man solle das Element <dialog> verwenden. Aber bei Fällen wie dem Weichzeichnen des Hintergrunds ist es ein legitimer Use Case, das Popover modal zu machen. Wäre <popover modal=true> da nicht der bessere Ansatz?
• Es wurde Beispielcode geteilt, der eine benutzerdefinierte Implementierung mit Stimulus + Popper zeigt.
• Es wurde darauf hingewiesen, dass auf der Seite kein Bild vorhanden ist, das zeigt, was ein Popover eigentlich ist.
• Reaktionen, die vom Erscheinen der Popover API beeindruckt sind.