Popover

Opens a panel next to its trigger. Set placement to any side and alignment; the panel flips to the opposite side when it would overflow the viewport.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add popover

Usage

Popover.Content has role="dialog" and takes its accessible name from Popover.Title, so include one or pass aria-label.

While a popover is open, the rest of the page is inert unless hoverable is set. Set inert={false} on Popover.Root only when the surrounding page must remain interactive.

import * as Popover from '@sivir-ui/svelte/components/popover';
import { Textarea } from '@sivir-ui/svelte/components/textarea';

<Popover.Root>
  <Popover.Trigger>Feedback</Popover.Trigger>
  <Popover.Content class="w-80">
    <Popover.Title>Send feedback</Popover.Title>
    <Textarea placeholder="What’s working, and what isn’t?" />
  </Popover.Content>
</Popover.Root>

Examples

Basic popover

Placement variants

Anatomy

Popover.Root - Controls popover state.

Popover.Trigger - Opens the popover.

Popover.Content - Renders the popover surface.

Popover.Title - Renders the popover title.