Popover

Overview

Popover displays floating content anchored to a trigger, opening on click and closing on outside click or . 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.