PopoverButton

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 Überlagerung beliebigen Inhalts. Dabei liegt er immer über allem anderen Content (top-layer) und bleibt auch beim scrollen am zugehörigen button, damit der Kontext optisch immer bestehen bleibt. 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.

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

Tooltip 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 ()
_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 _accessKey="p" _label="Drucken" ><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: Definiert die Tastenkombination zum Auslösen oder Fokussieren des Buttons
_shortKey: Definiert einen visuellen Shortcut-Hinweis und liest ihn in Screenreadern vor

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.	`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.	`string \| string[] \| undefined`	`'normal'`

Methods

click

click() => Promise<void>

Clicks the primary interactive element inside this component.

Returns

Type: Promise<void>

`focus(options?: KolFocusOptions) => Promise<void>`

Sets focus on the internal element.

Parameters

Name	Type	Description
`options`	`KolFocusOptions \| undefined`

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​

Playground​

Funktionalitäten​

Grundlegende Button-Eigenschaften​

Button-Varianten und Styling​

Popover-Positionierung​

Popover-Inhalt​

Shortcuts und Fokus​

API​

Overview​

Properties​

Methods​

click​

Returns​

focus(options?: KolFocusOptions) => Promise<void>​

Parameters​

Returns​

hidePopover() => Promise<void>​

Returns​

showPopover() => Promise<void>​

Returns​

Slots​

Beispiel

Barrierefreiheit

Links und Referenzen

Verwendung

Tastatursteuerung

Best Practices / Empfehlungen

Anwendungsfälle

Playground

Funktionalitäten

Grundlegende Button-Eigenschaften

Button-Varianten und Styling

Popover-Positionierung

Popover-Inhalt

Shortcuts und Fokus

API

Overview

Properties

Methods

click

Returns

`focus(options?: KolFocusOptions) => Promise<void>`

Parameters

Returns

`hidePopover() => Promise<void>`

Returns

`showPopover() => Promise<void>`

Returns

Slots