Popover

Overlay anchored to a trigger, capable of holding any rich content. Unlike Tooltip, it persists on click. Supports four placements, portal rendering, click-outside and Escape dismissal, and controlled/uncontrolled modes.

Import

tsx

import { Popover } from '@velocityuikit/velocityui'

Preview

Placements

Rich content

Props

Prop	Type	Default	Description
trigger	`ReactNode`	—	The element that opens the popover when clicked.
content	`ReactNode`	—	Content rendered inside the popover panel.
placement	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Preferred placement relative to the trigger.
open	`boolean`	—	Controls open state externally (controlled mode).
onOpenChange	`(open: boolean) => void`	—	Callback when open state changes (controlled mode).

Examples

Basic

tsx

import { Popover, Button } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <Popover
      trigger={<Button variant="outline">Open popover</Button>}
      content={
        <div>
          <strong>Popover title</strong>
          <p style={{ margin: '0.5rem 0 0', fontSize: '0.875rem', color: '#64748b' }}>
            This is some popover content. Click outside to dismiss.
          </p>
        </div>
      }
    />
  )
}

Top placement

tsx

import { Popover, Button } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ padding: '4rem 0 0' }}>
      <Popover
        placement="top"
        trigger={<Button variant="secondary">Popover above</Button>}
        content={<p style={{ margin: 0 }}>Placed above the trigger</p>}
      />
    </div>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */