PopoverButton

Synonyms: Popover Menu, Overlay Menu, Context Button

Description: The PopoverButton combines a button with an associated popover overlay that is shown and hidden on click. The popover uses the native HTML Popover API for lightweight, non-modal overlaying of arbitrary content. The button controls the visibility of the popover via click, while the position can be configured flexibly.

Example

Example of a PopoverButton with sample content inside the popover:

Password requirements

Minimum 8 characters
Upper and lowercase letters (A–Z, a–z)
At least one number (0–9)
At least one special character (e.g. !@#$%)

<KolPopoverButton _label="Password help" ><strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul></KolPopoverButton>

Accessibility

Focus management: The popover is rendered as a native HTML Popover, which enables automatic focus handling. The button retains its focus state after closing.
Label requirement: The _label attribute is required and provides the semantic label for the button. This is used as aria-label for screen readers.
Keyboard control: The PopoverButton is fully operable via keyboard and supports standard button shortcuts.
Semantic structure: The popover is provided with correct ARIA structure for non-modal overlays.

Links and References

Usage

Keyboard Control

Key	Function
`Tab`	Focuses the button or moves to the next interactive element.
`Shift + Tab`	Moves to the previous interactive element.
`Enter`	Activates the button and shows or hides the popover.
`Space`	Alternative activation of the button (shows or hides the popover).

Best Practices / Recommendations

Meaningful labels: Use clear button labels that clearly indicate the purpose or consequence of the click (e.g. "Options", "Menu", "Filter").
Contextual positioning: Use _popoverAlign to position the popover sensibly. A downward-facing popover is standard; upward-facing popovers are useful when little space is available below.
Limit content: Popovers should not contain extensive content. For more complex dialogs, use the .
Clear close state: The button visually indicates whether the popover is open. Make sure users understand this.
Click-outside behavior: The native Popover API automatically closes the popover when clicking outside (default behavior).
No nesting: Avoid nested popovers or multiple simultaneously open popovers.

Use Cases

Context menus: Action menus next to or above elements (Edit, Delete, More options).
Filter or sort options: Compact option areas in a table or list.
Additional information: Tooltips with interactive content, help hints.
Quick actions: Frequent actions on or next to elements without an additional page.
Settings or configuration: Quick settings for an element or component.

Playground

Test the various properties of the PopoverButton:

Password requirements

Minimum 8 characters
Upper and lowercase letters (A–Z, a–z)
At least one number (0–9)
At least one special character (e.g. !@#$%)

Popover Align

Tooltip Align

Variant

Icons

<KolPopoverButton _label="Password help" ><strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul></KolPopoverButton>

Functionality

Basic Button Properties

The PopoverButton supports the standard button attributes:

Password requirements

Minimum 8 characters
Upper and lowercase letters (A–Z, a–z)
At least one number (0–9)
At least one special character (e.g. !@#$%)

<KolPopoverButton _label="Button" ><strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul></KolPopoverButton>

Available attributes:

_label: Visible or semantic label of the button
_hideLabel: Hides the label visually but keeps it visible for screen readers
_disabled: Disables the button (interaction not possible)
_type: Button type (button, submit, reset)

Button Variants and Styling

The PopoverButton supports various visual variants:

Password requirements

Minimum 8 characters
Upper and lowercase letters (A–Z, a–z)
At least one number (0–9)
At least one special character (e.g. !@#$%)

Tooltip Align

Variant

Icons

<KolPopoverButton _label="Styled Button" ><strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul></KolPopoverButton>

Available attributes:

_variant: Visual style (normal, primary, secondary, tertiary, danger, ghost, custom)
_customClass: Custom CSS class when _variant="custom" is set
_icons: Icon class names for icon fonts (e.g. Font Awesome)
_inline: Displays the component inline without a minimum size of 44px
_tooltipAlign: Preferred position of the tooltip (top, right, bottom, left)

The position of the popover relative to the button can be controlled:

Password requirements

Minimum 8 characters
Upper and lowercase letters (A–Z, a–z)
At least one number (0–9)
At least one special character (e.g. !@#$%)

Popover Align

<KolPopoverButton _label="Position" _popoverAlign="bottom" ><strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul></KolPopoverButton>

Available positions:

bottom: Below the button (default)
top: Above the button
left: To the left of the button
right: To the right of the button

The popover content is provided via the default slot:

Option 1
Option 2
Option 3

<KolPopoverButton _label="Menu" ><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>

Note: The slot content is processed with HTML sanitization for security. The content should remain concise and focused.

Shortcuts and Focus

The PopoverButton supports accessibility features for extended keyboard interaction:

Password requirements

Minimum 8 characters
Upper and lowercase letters (A–Z, a–z)
At least one number (0–9)
At least one special character (e.g. !@#$%)

<KolPopoverButton _label="Alt+O" ><strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul></KolPopoverButton>

Available attributes:

_accessKey: Key combination for quick activation (e.g. "o" for Alt+O)
_tabIndex: Tab order in the form
_shortKey: Visual display of the shortcut in the 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.	`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`).

PopoverButton

Example

Accessibility

Links and References

Usage

Keyboard Control

Best Practices / Recommendations

Use Cases

Playground

Functionality

Basic Button Properties

Button Variants and Styling

Popover Positioning

Popover Content

Shortcuts and Focus

API

Overview

Properties

Methods

click

Returns

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

Parameters

Returns

`hidePopover() => Promise<void>`

Returns

`showPopover() => Promise<void>`

Returns

Slots

Examples

Example​

Accessibility​

Links and References​

Usage​

Keyboard Control​

Best Practices / Recommendations​

Use Cases​

Playground​

Functionality​

Basic Button Properties​

Button Variants and Styling​

Popover Positioning​

Popover Content​

Shortcuts and Focus​

API​

Overview​

Properties​

Methods​

click​

Returns​

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

Parameters​

Returns​

hidePopover() => Promise<void>​

Returns​

showPopover() => Promise<void>​

Returns​

Slots​

Examples​

Example

Accessibility

Links and References

Usage

Keyboard Control

Best Practices / Recommendations

Use Cases

Playground

Functionality

Basic Button Properties

Button Variants and Styling

Popover Positioning

Popover Content

Shortcuts and Focus

API

Overview

Properties

Methods

click

Returns

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

Parameters

Returns

`hidePopover() => Promise<void>`

Returns

`showPopover() => Promise<void>`

Returns

Slots

Examples