Popover
Synonyme: Overlay, Popup, dynamisches Overlay
Beschreibung: Die Popover-Komponente bietet eine leichte, nicht-modale Overlay-Lösung, die temporär zusätzliche Inhalte neben einem Triggerelement anzeigt. Sie nutzt die native HTML Popover API für optimierte Performance.
Die Popover-Komponente wird intern innerhalb von KoliBri verwendet (z.B. im
Beispiel
Einfaches Popover mit Standard-Konfiguration:
<button popovertarget="my-popover">Trigger</button>
<div id="my-popover" popover>
<p>Dies ist der Popover-Inhalt.</p>
</div>
Barrierefreiheit
- Die Popover-Komponente nutzt die native HTML Popover API für verbesserte Unterstützung durch assistive Technologien.
- Das Triggerelement und der Popover-Inhalt sollten semantisch miteinander verknüpft sein.
- Der Popover-Inhalt sollte eine ausreichende Größe und Kontrast für die Lesbarkeit haben.
- Bei verschachtelten oder mehreren Popovers kann die Fokussteuerung komplex werden; in solchen Fällen wird die Verwendung von
oder empfohlen.
Links und Referenzen
Verwendung
Best Practices / Empfehlungen
- Verwenden Sie diese Komponente primär für interne KoliBri-Implementierungen.
- Achten Sie darauf, dass der Popover-Inhalt nicht zu groß ist und auf verschiedenen Bildschirmgrößen angepasst werden kann.
- Stellen Sie sicher, dass der Popover geschlossen werden kann, z.B. durch Klick außerhalb oder eine explizite Schließschaltfläche.
- Verwenden Sie aussagekräftige Labels und Beschreibungen für das Triggerelement (
_label,_ariaDescription). - Berücksichtigen Sie die Position des Popover-Inhalts (
_popoverAlign), um Sichtbarkeitsprobleme zu vermeiden.
Anwendungsfälle
- Interne Verwendung in der PopoverButton-Komponente
- Flexible, leichte Overlay-Lösungen bei speziellen Anforderungen
- Kontextabhängige Hilfeinformationen oder Aktionsmenüs
Konstruktion / Technik
Positionierung
Die Popover-Position wird über _popoverAlign gesteuert:
| Wert | Beschreibung |
|---|---|
top | Das Popover wird über dem Triggerelement angeordnet. |
bottom | Das Popover wird unter dem Triggerelement angeordnet (Standard). |
left | Das Popover wird links neben dem Triggerelement angeordnet. |
right | Das Popover wird rechts neben dem Triggerelement angeordnet. |
Events
Zur Behandlung von Events bzw. Callbacks siehe
| Event | Auslöser | Value |
|---|---|---|
close | Das Popover wird geschlossen [Nicht im Quellcode gefunden – bitte prüfen] | - |
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). |