michaelschiemer/docs/components/popover.md

Popover Component

Wiederverwendbare Popover-Komponente mit nativer Popover API.

Baseline Status

Baseline 2025: Popover API ist Baseline Newly available.

Verwendung

Basis-Verwendung

<button popovertarget="my-popover">Open Popover</button>

<x-popover id="my-popover" type="auto">
    <p>Popover content</p>
</x-popover>

Mit Positionierung

<button popovertarget="user-menu-popover">User Menu</button>

<x-popover id="user-menu-popover" type="auto" position="bottom-end">
    <ul role="menu">
        <li><a href="/profile">Profile</a></li>
        <li><a href="/settings">Settings</a></li>
    </ul>
</x-popover>

Attribute

Attribut	Typ	Standard	Beschreibung
id	string	auto-generated	Popover ID (erforderlich für popovertarget)
type	string	auto	Popover-Typ: auto oder manual
popover	string	auto	Alias für type
position	string	null	Position: bottom-start, bottom-end, top-start, top-end
anchor	string	null	CSS Anchor Element ID (für Anchor Positioning)
aria-label	string	null	ARIA label für accessibility
aria-labelledby	string	null	ARIA labelledby für accessibility

Popover-Typen

Auto Popover (type="auto")

• Automatisches Dismissal beim Klick außerhalb
• Automatisches Dismissal beim ESC-Key
• Automatisches Dismissal beim Klick auf einen anderen Popover-Trigger
• Automatisches Focus-Management

Manual Popover (type="manual")

• Manuelles Management erforderlich
• Kein automatisches Dismissal
• Für komplexe Interaktionen geeignet

Positionierung

Die Komponente unterstützt verschiedene Positionierungen:

• bottom-start - Unten links
• bottom-end - Unten rechts
• top-start - Oben links
• top-end - Oben rechts

Trigger-Button

Der Trigger-Button benötigt das popovertarget Attribut:

<button popovertarget="my-popover" aria-haspopup="true" aria-expanded="false">
    Open Popover
</button>

Das aria-expanded Attribut wird automatisch aktualisiert, wenn der Popover geöffnet/geschlossen wird.

Accessibility

Die Komponente ist vollständig accessibility-konform:

• Native Browser-Support für Keyboard-Navigation
• Automatisches Focus-Management
• ESC-Key Support (native)
• ARIA-Attribute unterstützt
• Screen Reader Support

JavaScript Integration

Die Popover API funktioniert ohne JavaScript, aber für erweiterte Features kann JavaScript verwendet werden:

const popover = document.getElementById('my-popover');
const trigger = document.querySelector('[popovertarget="my-popover"]');

// Popover öffnen
popover.showPopover();

// Popover schließen
popover.hidePopover();

// Popover togglen
popover.togglePopover();

// Event Listener
popover.addEventListener('toggle', (e) => {
    const isOpen = popover.matches(':popover-open');
    trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
});

View Transitions

Die Komponente unterstützt View Transitions für animierte Übergänge:

[popover].admin-popover {
    view-transition-name: admin-popover;
}

CSS-Klassen

Die Komponente verwendet folgende CSS-Klassen:

• .admin-popover - Basis-Klasse
• .admin-popover--auto - Auto Popover Variante
• .admin-popover--manual - Manual Popover Variante
• .admin-popover--bottom-start - Position bottom-start
• .admin-popover--bottom-end - Position bottom-end
• .admin-popover--top-start - Position top-start
• .admin-popover--top-end - Position top-end

Browser-Support

• Chrome 125+
• Firefox 129+
• Safari 18+
• Edge 125+

Migration

Von Custom Dropdown migrieren

Vorher:

<div class="dropdown" data-dropdown>
    <button data-dropdown-trigger="menu">Menu</button>
    <ul class="dropdown-menu" data-dropdown-content="menu">
        <li><a href="/item1">Item 1</a></li>
        <li><a href="/item2">Item 2</a></li>
    </ul>
</div>

Nachher:

<button popovertarget="menu-popover">Menu</button>

<x-popover id="menu-popover" type="auto" position="bottom-start">
    <ul role="menu">
        <li><a href="/item1">Item 1</a></li>
        <li><a href="/item2">Item 2</a></li>
    </ul>
</x-popover>

JavaScript entfernen: Das Custom Dropdown-Management JavaScript kann entfernt werden, da die Popover API native Funktionalität bietet.