Popover

A floating surface anchored to a trigger. Supports four placements.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add popover

Usage

Import Popover and compose it with sub-components:

Open non-hover popovers make outside document content inert by default. Set inert={false} on Popover.Root only when the surrounding page must remain interactive.

import * as Popover from '$lib/sivir/components/popover';

<Popover.Root>
  <Popover.Trigger>Open</Popover.Trigger>
  <Popover.Content class="w-64">
    Content here
  </Popover.Content>
</Popover.Root>

Examples

Explore the Popover in different placements and compositions.

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.