PopoverButton

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Popover-Menü, Überlagerungsmenü, Context-Button

Beschreibung: Der PopoverButton kombiniert einen Button mit einer zugehörigen Popover-Overlay, die auf Knopfdruck ein- und ausgeblendet wird. Das Popover nutzt die native HTML Popover API für leichte, nicht-modale Überlagering beliebigen Inhalts. Der Button kontrolliert die Sichtbarkeit des Popovers per Klick, während die Position flexibel konfiguriert werden kann.

Beispiel

Darstellung eines PopoverButtons mit Beispielinhalt im Popover:

Passwortanforderungen

Mindestens 8 Zeichen
Groß- und Kleinbuchstaben (A–Z, a–z)
Mindestens eine Ziffer (0–9)
Mindestens ein Sonderzeichen (z.B. !@#$%)

<KolPopoverButton _label="Passwort-Hilfe" ><strong>Passwortanforderungen</strong><ul><li>Mindestens 8 Zeichen</li><li>Groß- und Kleinbuchstaben (A–Z, a–z)</li><li>Mindestens eine Ziffer (0–9)</li><li>Mindestens ein Sonderzeichen (z.B. !@#$%)</li></ul></KolPopoverButton>

Barrierefreiheit

Fokusmanagement: Das Popover wird als native HTML Popover dargestellt, was eine automatische Fokusbehandlung ermöglicht. Der Button bewahrt seinen Fokuszustand nach dem Schließen.
Label-Pflicht: Das Attribut _label ist erforderlich und stellt die semantische Beschriftung des Buttons bereit. Für Screenreader wird dies als aria-label verwendet.
Tastatursteuerung: Der PopoverButton ist vollständig über die Tastatur bedienbar und unterstützt Standard-Shortcuts für Buttons.
Semantische Struktur: Das Popover wird mit korrekter ARIA-Struktur für non-modal overlays bereitgestellt.

Links und Referenzen

Verwendung

Tastatursteuerung

Taste	Funktion
`Tab`	Fokussiert den Button oder springt zum nächsten interaktiven Element.
`Shift + Tab`	Wechselt zum vorherigen interaktiven Element.
`Enter`	Aktiviert den Button und zeigt oder verbirgt das Popover.
`Space`	Alternative Aktivierung des Buttons (zeigt oder verbirgt das Popover).

Best Practices / Empfehlungen

Aussagekräftige Labels: Verwenden Sie klare Button-Labels, die den Zweck oder die Folge des Klicks deutlich machen (z.B. „Optionen", „Menü", „Filter").
Kontextuelle Positionierung: Nutzen Sie _popoverAlign, um das Popover sinnvoll zu positionieren. Ein nach unten ausgerichtetes Popover ist Standard, nach oben ausgerichtete Popover sind sinnvoll, wenn wenig Platz darunter verfügbar ist.
Inhalt beschränken: Die Popover sollten keinen umfangreichen Inhalt enthalten. Für komplexere Dialoge nutzen Sie die .
Eindeutiger Schließ-State: Der Button zeigt visuell, ob das Popover offen ist. Stellen Sie sicher, dass die Nutzer das verstehen.
Click-Outside-Verhalten: Das native Popover API schließt das Popover automatisch, wenn außerhalb geklickt wird (Standard-Verhalten).
Keine Verschachtelung: Vermeiden Sie verschachtelte Popover oder mehrere gleichzeitig offene Popover.

Anwendungsfälle

Kontextmenüs: Aktionsmenüs neben oder über Elementen (Bearbeiten, Löschen, Mehr-Optionen).
Filter oder Sortieroptionen: Kompakte Optionsbereiche in einer Tabelle oder Liste.
Zusätzliche Informationen: Tooltips mit interaktivem Content, Hilfehinweise.
Schnellaktionen: Häufige Aktionen an bzw. neben Elementen ohne zusätzliche Seite.
Settings oder Konfiguration: Schnelle Einstellungen für ein Element oder eine Komponente.

Konstruktion / Technik

Playground

Testen Sie die verschiedenen Eigenschaften des PopoverButtons:

Passwortanforderungen

Mindestens 8 Zeichen
Groß- und Kleinbuchstaben (A–Z, a–z)
Mindestens eine Ziffer (0–9)
Mindestens ein Sonderzeichen (z.B. !@#$%)

Popover Align

Variant

Icons

<KolPopoverButton _label="Passwort-Hilfe" ><strong>Passwortanforderungen</strong><ul><li>Mindestens 8 Zeichen</li><li>Groß- und Kleinbuchstaben (A–Z, a–z)</li><li>Mindestens eine Ziffer (0–9)</li><li>Mindestens ein Sonderzeichen (z.B. !@#$%)</li></ul></KolPopoverButton>

Funktionalitäten

Grundlegende Button-Eigenschaften

Der PopoverButton unterstützt die Standard-Button-Attribute:

Passwortanforderungen

Mindestens 8 Zeichen
Groß- und Kleinbuchstaben (A–Z, a–z)
Mindestens eine Ziffer (0–9)
Mindestens ein Sonderzeichen (z.B. !@#$%)

<KolPopoverButton _label="Button" ><strong>Passwortanforderungen</strong><ul><li>Mindestens 8 Zeichen</li><li>Groß- und Kleinbuchstaben (A–Z, a–z)</li><li>Mindestens eine Ziffer (0–9)</li><li>Mindestens ein Sonderzeichen (z.B. !@#$%)</li></ul></KolPopoverButton>

Verfügbare Attribute:

_label: Sichtbare oder semantische Beschriftung des Buttons
_hideLabel: Blendet das Label visuell aus, bleibt aber für Screenreader sichtbar
_disabled: Deaktiviert den Button (Interaktion nicht möglich)
_type: Button-Typ (button, submit, reset)

Button-Varianten und Styling

Der PopoverButton unterstützt verschiedene visuelle Varianten:

Passwortanforderungen

Mindestens 8 Zeichen
Groß- und Kleinbuchstaben (A–Z, a–z)
Mindestens eine Ziffer (0–9)
Mindestens ein Sonderzeichen (z.B. !@#$%)

Tooltip Align

Variant

Icons

<KolPopoverButton _label="Styled Button" ><strong>Passwortanforderungen</strong><ul><li>Mindestens 8 Zeichen</li><li>Groß- und Kleinbuchstaben (A–Z, a–z)</li><li>Mindestens eine Ziffer (0–9)</li><li>Mindestens ein Sonderzeichen (z.B. !@#$%)</li></ul></KolPopoverButton>

Verfügbare Attribute:

_variant: Visueller Stil (normal, primary, secondary, tertiary, danger, ghost, custom)
_customClass: Benutzerdefinierte CSS-Klasse, wenn _variant="custom" gesetzt ist
_icons: Icon-Klassennamen für Icon-Schriftarten (z.B. Font Awesome)
_inline: Zeigt die Komponente inline ohne Mindestgröße von 44px
_tooltipAlign: Bevorzugte Position des Tooltips (top, right, bottom, left)

Die Position des Popovers relativ zum Button kann gesteuert werden:

Passwortanforderungen

Mindestens 8 Zeichen
Groß- und Kleinbuchstaben (A–Z, a–z)
Mindestens eine Ziffer (0–9)
Mindestens ein Sonderzeichen (z.B. !@#$%)

Popover Align

<KolPopoverButton _label="Position" _popoverAlign="bottom" ><strong>Passwortanforderungen</strong><ul><li>Mindestens 8 Zeichen</li><li>Groß- und Kleinbuchstaben (A–Z, a–z)</li><li>Mindestens eine Ziffer (0–9)</li><li>Mindestens ein Sonderzeichen (z.B. !@#$%)</li></ul></KolPopoverButton>

Verfügbare Positionen:

bottom: Unterhalb des Buttons (Standard)
top: Oberhalb des Buttons
left: Links des Buttons
right: Rechts des Buttons

Das Popover-Inhalt wird über den Standard-Slot bereitgestellt:

Option 1
Option 2
Option 3

<KolPopoverButton _label="Menü" ><ul style='margin:0; padding:0; list-style:none;'><li style='padding:8px;'><strong>Option 1</strong></li><li style='padding:8px;'><strong>Option 2</strong></li><li style='padding:8px;'><strong>Option 3</strong></li></ul></KolPopoverButton>

Hinweis: Der Slot-Inhalt wird mit HTML-Sanitierung verarbeitet für Sicherheit. Der Inhalt sollte prägnant und fokussiert bleiben.

Shortcuts und Fokus

Der PopoverButton unterstützt Accessibility-Features für erweiterte Tastaturinteraktion:

Passwortanforderungen

Mindestens 8 Zeichen
Groß- und Kleinbuchstaben (A–Z, a–z)
Mindestens eine Ziffer (0–9)
Mindestens ein Sonderzeichen (z.B. !@#$%)

<KolPopoverButton _label="Alt+O" ><strong>Passwortanforderungen</strong><ul><li>Mindestens 8 Zeichen</li><li>Groß- und Kleinbuchstaben (A–Z, a–z)</li><li>Mindestens eine Ziffer (0–9)</li><li>Mindestens ein Sonderzeichen (z.B. !@#$%)</li></ul></KolPopoverButton>

Verfügbare Attribute:

_accessKey: Tastenkombi für schnelle Aktivierung (z.B. "o" für Alt+O)
_tabIndex: Tab-Reihenfolge im Formular
_shortKey: Visuelle Anzeige des Shortcuts im Button-Label

API

Overview

A button that toggles the visibility of a popover overlay containing arbitrary content. The popover uses the native HTML Popover API for lightweight, non-modal overlays.

Properties

Property	Attribute	Description	Type	Default
`_accessKey`	`_access-key`	Defines the key combination that can be used to trigger or focus the component's interactive element.	`string \| undefined`	`undefined`
`_ariaDescription`	`_aria-description`	Defines the value for the aria-description attribute.	`string \| undefined`	`undefined`
`_customClass`	`_custom-class`	Defines the custom class attribute if _variant="custom" is set.	`string \| undefined`	`undefined`
`_disabled`	`_disabled`	Makes the element not focusable and ignore all events.	`boolean \| undefined`	`false`
`_hideLabel`	`_hide-label`	Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.	`boolean \| undefined`	`false`
`_icons`	`_icons`	Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).	`KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`	`undefined`
`_inline`	`_inline`	Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.	`boolean \| undefined`	`false`
`_label` (required)	`_label`	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.	`string`	`undefined`
`_name`	`_name`	Defines the technical name of an input field.	`string \| undefined`	`undefined`
`_popoverAlign`	`_popover-align`	Defines where to show the Popover preferably: top, right, bottom or left.	`"bottom" \| "left" \| "right" \| "top" \| undefined`	`'bottom'`
`_shortKey`	`_short-key`	Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.	`string \| undefined`	`undefined`
`_tabIndex`	`_tab-index`	Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)	`number \| undefined`	`undefined`
`_tooltipAlign`	`_tooltip-align`	Defines where to show the Tooltip preferably: top, right, bottom or left.	`"bottom" \| "left" \| "right" \| "top" \| undefined`	`'top'`
`_type`	`_type`	Defines either the type of the component or of the components interactive element.	`"button" \| "reset" \| "submit" \| undefined`	`'button'`
`_value`	`_value`	Defines the value of the element.	`boolean \| null \| number \| object \| string \| undefined`	`undefined`
`_variant`	`_variant`	Defines which variant should be used for presentation.	`"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| "tertiary" \| undefined`	`'normal'`

Methods

click

click() => Promise<void>

Clicks the primary interactive element inside this component.

Returns

Type: Promise<void>

`focus() => Promise<void>`

Sets focus on the internal element.

Returns

Type: Promise<void>

`hidePopover() => Promise<void>`

Hides the popover programmatically by forwarding the call to the web component.

Returns

Type: Promise<void>

`showPopover() => Promise<void>`

Shows the popover programmatically by forwarding the call to the web component.

Returns

Type: Promise<void>

Slots

Slot	Description
	The popover content (displayed when the button is clicked).
`"expert"`	Custom label content for the button (when `_label` is `false`).

Beispiel​

Barrierefreiheit​

Links und Referenzen​

Verwendung​

Tastatursteuerung​

Best Practices / Empfehlungen​

Anwendungsfälle​

Konstruktion / Technik​

Playground​

Funktionalitäten​

Grundlegende Button-Eigenschaften​

Button-Varianten und Styling​

Popover-Positionierung​

Popover-Inhalt​

Shortcuts und Fokus​

API​

Overview​

Properties​

Methods​

click​

Returns​

focus() => Promise<void>​

Returns​

hidePopover() => Promise<void>​

Returns​

showPopover() => Promise<void>​

Returns​

Slots​

Beispiel

Barrierefreiheit

Links und Referenzen

Verwendung

Tastatursteuerung

Best Practices / Empfehlungen

Anwendungsfälle

Konstruktion / Technik

Playground

Funktionalitäten

Grundlegende Button-Eigenschaften

Button-Varianten und Styling

Popover-Positionierung

Popover-Inhalt

Shortcuts und Fokus

API

Overview

Properties

Methods

click

Returns

`focus() => Promise<void>`

Returns

`hidePopover() => Promise<void>`

Returns

`showPopover() => Promise<void>`

Returns

Slots