Popover

Show supplementary content or actions near a trigger with size and trigger options.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Popover for floating content tied to a trigger anchor. Use Tooltip for a short text hint or Dialog when content needs dialog focus handling. Configure closing through the public closeOn prop.

Place as="popover" inside the trigger host to associate it with the anchor automatically. In static mode, control visibility manually with bind:open.
trigger selects the opening behavior and closeOn selects the closing policy. Use closeOn="manual" for an interactive example that must remain open.

Import

import { Popover } from '@snowui-design-system/components';

Usage

Triggers

Sizes

Placement

Manual close

Shared content

API Reference

Property	Type	Default	Example	Description
`id`	`string`	`—`	`id="shared-component-actions"`	Unique identifier in template mode.
`template`	`boolean`	`false`	`<Popover template id="shared-component-actions">…</Popover>`	Register a template without rendering it immediately; activate it with showPopover(id).
`size`	`PopoverSize`	`"sm"`	`size={value}`	Size variant.
`trigger`	`PopoverTrigger`	`"click"`	`trigger={value}`	Opening behavior in template mode.
`placement`	`PopoverPlacement`	`"bottom"`	`placement={value}`	Preferred placement; flips automatically when viewport space is insufficient.
`offset`	`number`	`8`	`offset={42}`	Distance in pixels between the floating panel and its trigger.
`closeOn`	`PopoverCloseMode`	`"outside"`	`closeOn={value}`	Closing policy: outside closes when blank space is clicked; manual closes only through a button inside Popover.
`closeOnEscape`	`boolean`	`true`	`closeOnEscape`	Whether Escape closes the Popover. Enabled by default for both closeOn modes.
`closeOnSelect`	`boolean`	`—`	`closeOnSelect`	Whether selecting an internal MenuItem closes the panel. An individual MenuItem closeOnSelect overrides it. Defaults to true for sm and false for md/lg.
`continuousHover`	`boolean`	`true`	`continuousHover`	Use a continuous container-level hover background across direct MenuItem children.
`open`	`boolean`	`true`	`open`	Manually control visibility in static mode; supports bind:open.
`onOpenChange`	`(open: boolean) => void`	`—`	`onOpenChange={(open) => menuOpen = open}`	Callback when open state changes.
`as`	`"popover" \| undefined`	`—`	`<Button>Actions<Popover as="popover">…</Popover></Button>`	Set as="popover" for embedded mode, which discovers the parent host as the anchor and trigger source.
`children`	`Snippet`	`—`	`<Popover><MenuItem as="item">Copy import</MenuItem></Popover>`	Panel content.