Popover

A floating panel anchored to a trigger element, used for richer content than a tooltip.

Import

tsx

import { Popover, PopoverHeader, PopoverBody, PopoverFooter } from '@tac-ui/web';

Basic Popover

Click the trigger to open a floating panel. The popover closes on outside click or Escape key.

tsx

<Popover trigger={<Button variant="outline">Open Popover</Button>}>
  <PopoverBody>
    <p>This is a simple popover with some content.</p>
  </PopoverBody>
</Popover>

With Header, Body and Footer

Use PopoverHeader, PopoverBody, and PopoverFooter to compose a structured layout with built-in border separators.

tsx

<Popover trigger={<Button variant="outline">Details</Button>}>
  <PopoverHeader>Popover Title</PopoverHeader>
  <PopoverBody>This popover has a structured layout with header, body, and footer sections.</PopoverBody>
  <PopoverFooter>
    <Button size="sm">Confirm</Button>
  </PopoverFooter>
</Popover>

Different Sides

Use the side prop to control which side of the trigger the panel appears on: top, bottom, left, or right.

tsx

<Popover trigger={<Button variant="outline">Top</Button>} side="top">
  <PopoverBody><p>Appears above</p></PopoverBody>
</Popover>
<Popover trigger={<Button variant="outline">Bottom</Button>} side="bottom">
  <PopoverBody><p>Appears below</p></PopoverBody>
</Popover>
<Popover trigger={<Button variant="outline">Left</Button>} side="left">
  <PopoverBody><p>Appears left</p></PopoverBody>
</Popover>
<Popover trigger={<Button variant="outline">Right</Button>} side="right">
  <PopoverBody><p>Appears right</p></PopoverBody>
</Popover>

No Padding (Menu Style)

Override PopoverBody padding with className="p-0" to render flush menu-style content inside the panel.

tsx

<Popover trigger={<Button variant="outline">Menu</Button>}>
  <PopoverBody className="p-0">
    <div className="flex flex-col py-1">
      <button className="px-4 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] ...">Option 1</button>
      <button className="...">Option 2</button>
      <button className="...">Option 3</button>
    </div>
  </PopoverBody>
</Popover>

API Reference

Prop	Type	Default	Description
trigger	React.ReactNode	-	The element that toggles the popover open/closed when clicked.
open	boolean	-	Controlled open state; omit to use uncontrolled mode.
onOpenChange	(open: boolean) => void	-	Called when the open state changes.
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	Side on which the panel appears relative to the trigger.
align	"start" \| "center" \| "end"	"center"	Alignment of the panel along the perpendicular axis.
children	React.ReactNode	-	Content rendered inside the popover panel.