Studio
2

Popover

Installation

pnpm dlx @mielui/svelte add popover

Usage

The theme setting chrome.borders chooses "single" or "double" framing. Double is the default. Single removes the extra frame while preserving content padding, composition, and inset variants.

Trigger onclick receives the native mouse event before changing open state. Call preventDefault to cancel opening or closing.

Bind open on Root when another control needs to open or close the panel. Use onOpenChange to respond to changes initiated inside the component. Updating your bound value directly does not call that callback again. Each Root keeps its own state, so opening one instance does not change another.

Popover coordinates focus and Escape with dialogs and nested floating controls. Include Title or give Content an aria-label when it has a dialog role. Set focusTrap and lockScroll to false for a non-modal composition; set inert to false on Root when outside content should remain interactive.

Open non-hover popovers make outside document content inert by default. Set inert={false} on Popover.Root only when the surrounding page must remain interactive.

import * as Popover from '$lib/mielui/components/popover';

<Popover.Root>
  <Popover.Trigger>Open</Popover.Trigger>
  <Popover.Content class="w-64" aria-label="Details">
    Content here
  </Popover.Content>
</Popover.Root>

Examples

Basic popover

Placement variants

Glass surface

Set surface="glass" on Popover.Content for a translucent background with blur. Omit surface to inherit --mielui-surface from your theme, or set surface="solid" to override it. The glass surface keeps an opaque fallback when backdrop filtering is unavailable and respects reduced-transparency preferences.

API reference

Popover.Root

Controls popover state.

Prop Type Default
children Snippet<[]> | undefined —
open Bindable boolean | undefined false
onOpenChange ((open: boolean) => void) | undefined —
placement Placement | undefined 'bottom'
state_key string | undefined

Stable identifier used to connect trigger and content ARIA attributes.

 —
stateKey string | undefined —
hoverable boolean | undefined —
delay number | undefined 0
closeDelay number | undefined 150
inert boolean | undefined

Make document content outside an open non-hover popover inert. Defaults to `true`.

 true

Popover.Content

Renders the popover surface.

Prop Type Default
surface "solid" | "glass" | undefined —
children Required Snippet<[]> —
class (string & (ClassValue | null)) | undefined —
surfaceClass string | undefined

Classes for the inset surface (where children live) — padding, layout, background overrides. The `class` prop styles the outer Panel frame.

 —
allowClickOutside boolean | undefined true
dismissLayer boolean | undefined

Render the full-viewport dismiss layer under the panel while open. Defaults to `true`. Set to `false` for triggers that must stay clickable while open (e.g. an input-style combobox trigger); outside pointer dismissal still applies via `allowClickOutside`.

 true
portal boolean | undefined true
refElement VirtualElement | undefined —
role "none" | "alertdialog" | "dialog" | "listbox" | "menu" | undefined 'dialog'
tabindex number | undefined -1
focusTrap boolean | undefined

Trap Tab focus inside the panel while open. Defaults to `true`.

 true
lockScroll boolean | undefined

Lock document scrolling while the panel is open. Defaults to `true`.

 true

Popover.Title

Renders the popover title.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

Popover.Trigger

Opens the popover.

Prop Type Default
icon boolean | undefined —
variant ButtonVariant | undefined —
size "sm" | "md" | "lg" | "icon" | undefined —
children Snippet<[]> | undefined —
class string | undefined —
element Bindable HTMLButtonElement | HTMLAnchorElement | undefined —
unstyled boolean | undefined

Forwarded to Button: render with `class` alone, skipping variant/size.

 —
onclick ((event: MouseEvent) => void) | undefined —
onopen (() => void) | undefined

Called immediately before this trigger opens its popover.

 —
style string | undefined —