Popover

Overview

Popover displays floating content anchored to a trigger, opening on click and closing on outside click or Esc. It’s built on Radix UI Popover, so it handles positioning, focus management, and keyboard interaction, and manages its own open state (it can also be controlled).

Use it for rich, interactive overlays — filters, pickers, small forms, or menus of actions. For simple hover hints use a Tooltip; for a modal use a Dialog. The content is rendered in a portal, so it escapes overflow clipping from ancestors.

Usage

Import the parts:

import { Popover, PopoverTrigger, PopoverContent } from "@eqtylab/equality";

Wrap a trigger and content in Popover. Use asChild on the trigger to render your own element (such as a Button) as the trigger:

<Popover>
  <PopoverTrigger asChild>
    <Button size="sm">Click me</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>This is a popover</p>
  </PopoverContent>
</Popover>

Default

Alignment

Use the align prop on PopoverContent to align it against the trigger. center is the default; start and end align to the trigger’s edges. Fine-tune the gap with sideOffset.

Align: start

Align: center (default)

Align: end

Usage

<PopoverContent align="start">…</PopoverContent>
<PopoverContent align="center">…</PopoverContent>
<PopoverContent align="end">…</PopoverContent>

Arrow

Set arrow on PopoverContent to render a small pointer connecting the content to its trigger.

<PopoverContent arrow>
  <p>Popover with an arrow</p>
</PopoverContent>

Slots

Props

Popover and PopoverTrigger forward their Radix props (e.g. open, onOpenChange, defaultOpen on the root). The props most commonly set on PopoverContent are below.