Popover component
The kit:popover component displays contextual content above an activator. It is useful for providing additional information, options or secondary actions without overloading the main interface.
Popovers open dynamically from an activator and can be positioned in several directions: top, bottom, left or right. It is bindable and customizable in terms of theme, density, color, etc.
kit:popover renders the activator snippet inline and the panel in a fixed-position <div> when open. The panel position is computed from the activator’s bounding rect and updates on scroll and resize. Scrolling the page while a popover is open closes it automatically.
The activator snippet receives one argument:
activator(model: ModelPopoverProps)- model.toggle:
(element: HTMLElement) => void
Examples of popover
position
- position:
'top' | 'bottom' | 'left' | 'right'='bottom'
Without preprocess Lapikit
If you aren’t using the Lapikit preprocessor in svelte.config.js, import the components directly:
API Reference
kit:popover
| props | type | description | default |
|---|---|---|---|
| open | boolean | Controls visibility. Bindable. | false |
| position | enum'top''bottom''left''right' | Preferred position relative to the activator. | 'bottom' |
| rounded | stringenum0'xs''sm''md''lg''xl' | Border radius of the floating panel. | |
| color | string | Foreground color override (--kit-popover-fg). | |
| background | string | Background color override (--kit-popover-bg). | |
| activator | Snippet<[model]> | Trigger element. Receives model with toggle. | |
| children | Snippet | Floating panel content. |
ModelPopoverProps
The ModelPopoverProps interface provides the properties passed to the activator slot. It allows you to access the Popover’s current state (open), manipulate it dynamically (state) and retrieve the trigger element or linked event (element).
You can use it to create fully customized activators that finely control Popover opening/closing.
| props | type | description |
|---|---|---|
| open | boolean | Whether the popover is currently open. |
| toggle | (element: HTMLElement) => void | Function to toggle the popover visibility. Call it with the trigger element to open/close the popover. The element is used for positioning the popover panel. |
kit:popover are the ideal complement to Dialogs or Buttons in modern interfaces.