Lapikit

Popover component

Popover

The 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.

Examples of popover

Base

Basic example of a popover with an activator button. This scenario shows the minimal operation of the component with bind:open to manage its display.

Position

This scenario shows the different positions available (top, bottom, left, right) to adapt Popover placement to the context of use and available space.

API Reference

propstypedescriptiondefaulttype_extend
open $bindablebooleanControls Popover opening.false
darkbooleanEnable dark theme for component.false
lightbooleanEnable light theme for the component.false
colorstringApplies a custom color to text or icons.undefined
backgroundstringApply a custom background color.undefined
densityenumControls internal content spacingdefaultcompact | comfortable | default
roundedstringControls item rounding (none, sm, md, lg, etc.).md
positionenumDefines the position of the popover relative to its trigger.falsebottom | top | left | right
activatorSnippetFunction or component used as trigger (interactive element that opens/closes the Popover)undefined[ModelPopover]

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.

Variables CSS

variabledefaultdescription
–-popover-color–-kit-on-surfaceText color
–-popover-background–-kit-surfaceBackground color
–-popover-radius--kit-radius-mdPopover edge radius

Popovers are the ideal complement to Dialogs or Buttons in modern interfaces.

©2025 Lapikit.

Made with by Nycolaide