Popover

Preview

This preview uses documentation-only styling. Ship with one of the included recipe outputs (CSS, Tailwind, or UnoCSS) for production styles.

Non-modal floating content panel.

#Usage

Compose Root, Anchor, Trigger, Content, Close.

import * as Popover from "@solidiom/popover"

;<Popover.Root>Popover content</Popover.Root>

#Installation

Install the package with pnpm add @solidiom/popover. The package requires compatible solid-js and @solidjs/web peer dependencies.

#Parts

Popover exposes 5 parts:

• Root — data-part="root".
• Anchor — data-part="anchor".
• Trigger — data-part="trigger".
• Content — data-part="content".
• Close — data-part="close".

#Styling

Popover carries data-scope="popover" and data-part attributes on each part for CSS/recipe targeting. State attributes like data-state, data-disabled, and data-highlighted are exposed where applicable.

#Keyboard & behavior

#Composition

Popover is designed to compose with other primitives. Its parts can be combined with Field, Button, or other primitives as needed.

#SSR and hydration

Popover renders as semantic HTML during server rendering. Interactive behavior (keyboard handlers, state management) activates on hydration without layout shift.

solidiom add popover