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.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ 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.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.