Popover
Synonyms: Overlay, Popup, dynamic overlay
Description: The Popover component provides a lightweight, non-modal overlay solution that temporarily displays additional content next to a trigger element. It uses the native HTML Popover API for optimised performance.
The Popover component is used internally within KoliBri (e.g. in the
Example
Simple popover with default configuration:
<button popovertarget="my-popover">Trigger</button>
<div id="my-popover" popover>
<p>This is the popover content.</p>
</div>
Accessibility
- The Popover component uses the native HTML Popover API for improved support by assistive technologies.
- The trigger element and the popover content should be semantically linked.
- The popover content should have sufficient size and contrast for readability.
- With nested or multiple popovers, focus management can become complex; in such cases, using
or is recommended.
Links and references
Usage
Best practices / Recommendations
- Use this component primarily for internal KoliBri implementations.
- Ensure that the popover content is not too large and can be adapted to different screen sizes.
- Make sure the popover can be closed, e.g. by clicking outside or via an explicit close button.
- Use meaningful labels and descriptions for the trigger element (
_label,_ariaDescription). - Consider the position of the popover content (
_popoverAlign) to avoid visibility issues.
Use cases
- Internal use in the PopoverButton component
- Flexible, lightweight overlay solutions for special requirements
- Context-sensitive help information or action menus
Construction / Technical
Positioning
The popover position is controlled via _popoverAlign:
| Value | Description |
|---|---|
top | The popover is placed above the trigger element. |
bottom | The popover is placed below the trigger element (default). |
left | The popover is placed to the left of the trigger element. |
right | The popover is placed to the right of the trigger element. |
Events
For the handling of events or callbacks, see
| Event | Trigger | Value |
|---|---|---|
close | The popover is closed [Not found in source – please verify] | - |
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). |