Introduction

Die Popover-Komponente ist ein interaktives Overlay-Element, das Zusatzdetails, Aktionen oder kontextbezogene Formulare in einer schwebenden Karte anzeigt, die relativ zu einem Anker-Triggerelement positioniert ist.

Speziell für unsere Zero-JS-Static-Rendering-Architektur und das bedingte Hydration-Modell konzipiert, nutzt der Popover effiziente, Page-Builder-freundliche Bindings. Er bleibt im HTML-Layout vollständig statisch, bis er als interaktive Preact-Insel hydriert wird, um Umschalt- und Escape-Auslöser reibungslos zu verarbeiten.

Usage

Diese Beispiele zeigen, wie Redakteure Popover-Blöcke konfigurieren und binden.

1. Einfacher informativer Popover

Ein sauberer, rein textbasierter Popover – ideal, um Begriffe zu erklären, Definitionen anzubieten oder leichte Hinweistexte anzuzeigen, ohne das Hauptlayout zu überladen.

{
  "type": "popover",
  "triggerText": "Learn More",
  "title": "Data Residency",
  "description": "Your profile data is stored securely in compliant Frankfurt (EU) server nodes."
}

2. Erweiterter Popover mit Inhalt und Footer-Aktionen

Ein Onboarding-Popover mit klar getrennten Abschnitten: einem informativen Header, Fließtext und benutzerdefinierten Aktionsbuttons im Footer-Slot.

{
  "type": "popover",
  "triggerText": "Setup Account",
  "title": "Configure API Integrations",
  "description": "Connect with external tools seamlessly.",
  "body": "Your subscription allows up to 5 concurrent server channels. Ensure your client secret credentials are copied before proceeding.",
  "footer": "Connect Keys",
  "showArrow": true
}

3. Popover mit benutzerdefiniertem SVG-Trigger und verschachtelten Kind-Blöcken

Für komplexere Dashboard-Panels können Popover benutzerdefinierte SVG-Trigger (mit Roh-Markup innerhalb von triggerIcon) einbetten und Listen untergeordneter Komponenten (wie verschachtelte Badges, Text oder zusätzliche Buttons) in der schwebenden Karte rendern.

{
  "type": "popover",
  "triggerText": "System Status",
  "triggerIcon": "<circle cx=\"12\" cy=\"12\" r=\"10\" /><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\" /><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\" />",
  "triggerAriaLabel": "System Operations Status Info",
  "title": "System Heartbeat",
  "description": "Operational health checks",
  "showArrow": true,
  "closable": true,
  "children": [
    {
      "blockType": "badge",
      "text": "API: OK",
      "colorPalette": "green"
    },
    {
      "blockType": "badge",
      "text": "DB: OK",
      "colorPalette": "green"
    }
  ]
}

Props

Architecture Notes

• Intelligente Viewport-Grenzausrichtung: Die interaktive Preact-Insel verfolgt den Bildschirmplatz dynamisch. Öffnet sich der Popover nahe einer Kante, wird die Richtung automatisch umgekehrt (z. B. von unten nach oben) und entlang der Achse verschoben, um Abschneiden zu verhindern.
• Einheitliche Event-Delegation: Öffnen, Schließen, Klick-außerhalb und Escape werden zentral vom Root-Element delegiert. Das minimiert clientseitige Event-Bindings.
• Semantische Overlays: Popover kompilieren in native, barrierefreie Layouts mit role="dialog", aria-haspopup="dialog" und aria-expanded="true|false" – volle Screenreader-Kompatibilität ab Werk.