CleenUI · Overlays · Popover

Popover

Floating contextual panel anchored to a trigger with collision-aware positioning and keyboard dismissal.

storybook.cleenui.com · overlays-popover--default
Open in new window

About Popover

Popover is the generic anchored-content primitive. Click a trigger, a panel appears positioned relative to it; click outside or press ESC to dismiss.

Positioning is collision-aware — if the panel would extend off the viewport, the placement automatically flips (right → left, bottom → top). Arrow indicators show the connection to the trigger. The Menu and Tooltip components use Popover under the hood.

When to use it

  • Action menus anchored to a button.
  • Form-field help-text or contextual explanations.
  • Filter or sort menus attached to column headers.
  • User and quick-action menus in nav bars.

Common props

Prop
Type
Description
trigger
ReactNode
Element that opens the popover.
content
ReactNode
Popover body content.
placement
Placement
Preferred position (e.g. "bottom-start").
showArrow
boolean
Render the connection arrow.
onOpenChange
(open: boolean) => void
Fires on open/close.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with