ComponentsOverlayPopover

Popover

Floating interactive panel anchored to a trigger. 4 sides, 3 alignments, arrow indicator and portal rendering.

4 sides3 alignmentsArrowPortalForms inside

Overview

Floating interactive panel anchored to a trigger. 4 sides, 3 alignments, arrow indicator and portal rendering.

Basic popover

Live preview

Activate the trigger to reveal contextual content anchored to it.

PopoverExample.tsx
tsx
import { Popover, Button } from 'omverse-ui'
 
<Popover trigger={<Button variant="outlined">Open popover</Button>}>
<p style={{ fontSize: 13, color: 'var(--color-text-secondary)' }}>
This is a simple popover with text content.
</p>
</Popover>

Use a popover for compact interactive content that belongs to one trigger. Use a dialog when the task needs stronger focus or more space.

Anatomy

  • Root container and spacing boundary.
  • Primary content and optional secondary metadata.
  • State indicators and utility affordances (icons, badges, controls).
  • Optional helper text, grouping, and behavioral wrappers.

When to use

  • Choose Popover when a repeated, structured interaction is required.
  • Use it for clear, consistent operations across similar surfaces.
  • Use in forms, lists, and action workflows where clarity matters.

When not to use

  • Do not use only for decorative layout without interaction meaning.
  • Avoid duplicating the same behavior without distinct user context.
  • Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

  • Use semantic structure and visible labels whenever possible.
  • Preserve keyboard navigation and focus visibility.
  • Announce status and changes when context requires it.

Content guidelines

  • Prefer short, clear labels.
  • Keep content actions scannable and outcome-oriented.
  • Use consistent wording across similar components.

Examples

Basic

Live preview

Simplest usage — wrap any trigger and put content inside

App.tsx
tsx
import { Popover, Button } from 'omverse-ui'
 
<Popover trigger={<Button variant="outlined">Open popover</Button>}>
<p style={{ fontSize: 13, color: 'var(--color-text-secondary)' }}>
This is a simple popover with text content.
</p>
</Popover>

With header and footer

Live preview

PopoverHeader adds a titled section; PopoverFooter aligns action buttons at the bottom

App.tsx
tsx
import { Popover, PopoverHeader, PopoverFooter, Button, Input } from 'omverse-ui'
 
<Popover trigger={<Button variant="outlined">Create note</Button>}>
<PopoverHeader
title="Quick note"
description="Add a note to this item"
/>
<Input placeholder="Write something..." textarea rows={3} />
<PopoverFooter>
<Button size="sm" variant="text">Cancel</Button>
<Button size="sm" variant="filled">Save</Button>
</PopoverFooter>
</Popover>

Positions

Live preview

side prop controls which edge the panel opens on — top, bottom, left, right

App.tsx
tsx
<Popover trigger={<Button variant="outlined" size="sm">Top</Button>} side="top">
<p style={{ fontSize: 12 }}>Opens on top</p>
</Popover>
 
<Popover trigger={<Button variant="outlined" size="sm">Bottom</Button>} side="bottom">
<p style={{ fontSize: 12 }}>Opens on bottom</p>
</Popover>
 
<Popover trigger={<Button variant="outlined" size="sm">Left</Button>} side="left">
<p style={{ fontSize: 12 }}>Opens on left</p>
</Popover>
 
<Popover trigger={<Button variant="outlined" size="sm">Right</Button>} side="right">
<p style={{ fontSize: 12 }}>Opens on right</p>
</Popover>

Without arrow

Live preview

showArrow={false} removes the directional arrow — cleaner look for inline panels

App.tsx
tsx
<Popover
trigger={<Button variant="outlined">No arrow</Button>}
showArrow={false}
>
<p style={{ fontSize: 13, color: 'var(--color-text-secondary)' }}>
Popover without arrow indicator.
</p>
</Popover>

Sizes

Live preview

sm · md (default) · lg · auto — controls the panel width

App.tsx
tsx
<Popover trigger={<Button variant="outlined" size="sm">sm</Button>} size="sm">
<p style={{ fontSize: 13 }}>Small (200 px) panel</p>
</Popover>
 
<Popover trigger={<Button variant="outlined" size="sm">md</Button>} size="md">
<p style={{ fontSize: 13 }}>Medium (320 px) — default</p>
</Popover>
 
<Popover trigger={<Button variant="outlined" size="sm">lg</Button>} size="lg">
<p style={{ fontSize: 13 }}>Large (480 px) panel</p>
</Popover>
 
<Popover trigger={<Button variant="outlined" size="sm">auto</Button>} size="auto">
<p style={{ fontSize: 13 }}>Auto — fits content width</p>
</Popover>

Props / API

Api Props

Props

PropTypeDefaultDescription
triggerReactNode—Element that triggers the popover
childrenReactNode—Popover content — any React node (forms, filters, rich text)
side'top' | 'bottom' | 'left' | 'right''bottom'Which side of the trigger to open on
align'start' | 'center' | 'end''start'Alignment along the chosen side
showArrowbooleantrueShows the arrow indicator pointing toward the trigger
size'sm' | 'md' | 'lg' | 'auto''md'Width of the popover panel
openbooleanundefinedControlled open state
onOpenChange(open: boolean) => voidundefinedCallback when open state changes
closeOnOutsidebooleantrueClose the popover when clicking outside
closeOnEscapebooleantrueClose the popover when pressing Escape
offsetnumberundefinedOffset from the trigger in px