Popover

Portal-based floating panel with 8 placements, 6 animations, auto-flip near edges, and an optional arrow.

Import

ts 
import Popover from '$lib/components/Popover.svelte';

Usage

The trigger snippet receives toggle and open. Call toggle() to open or close the panel.

svelte 
<Popover>
  {#snippet trigger({ toggle, open })}
    <Button variant={open ? 'primary' : 'secondary'} onclick={toggle}>
      Open Popover
    </Button>
  {/snippet}

  {#snippet children()}
    <div class="w-52 p-4">
      <p class="text-sm font-semibold">Hello!</p>
      <p class="mt-1 text-xs text-muted-foreground">This is a popover.</p>
    </div>
  {/snippet}
</Popover>

Placements

8 positions available. The popover auto-flips when it would overflow the viewport.

svelte 
<!-- 8 placement options -->
<Popover placement="top">...</Popover>
<Popover placement="top-start">...</Popover>
<Popover placement="top-end">...</Popover>
<Popover placement="bottom">...</Popover>
<Popover placement="bottom-start">...</Popover>
<Popover placement="bottom-end">...</Popover>
<Popover placement="left">...</Popover>
<Popover placement="right">...</Popover>

Animations

Six opening animations. Click each button to preview.

svelte 
<Popover animation="scale">...</Popover>
<Popover animation="slide">...</Popover>
<Popover animation="elastic">...</Popover>
<Popover animation="flip">...</Popover>
<Popover animation="bounce">...</Popover>
<Popover animation="zoom">...</Popover>

Arrow

The arrow is enabled by default. Set arrow=false to hide it — useful for dropdown menus.

svelte 
<!-- Arrow enabled (default) -->
<Popover arrow={true}>...</Popover>

<!-- No arrow -->
<Popover arrow={false}>...</Popover>

Use Cases

Real-world patterns built with Popover.

svelte 
<Popover placement="bottom-start" animation="scale">
  {#snippet trigger({ toggle })}
    <button onclick={toggle} class="...">
      <span class="avatar">A</span>
      @ui.engineer
    </button>
  {/snippet}

  {#snippet children()}
    <div class="w-72 p-5">
      <p class="font-bold">UI Engineer</p>
      <p class="text-sm text-muted-foreground">@ui.engineer</p>
      <div class="mt-3 flex gap-5 text-sm">
        <span><strong>512</strong> Following</span>
        <span><strong>18.2K</strong> Followers</span>
      </div>
      <Button class="mt-4" fullWidth>Follow</Button>
    </div>
  {/snippet}
</Popover>

API Reference

PropTypeDefaultDescription
open booleanfalseBindable open state of the popover.
placement 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end''bottom'Preferred placement. Auto-flips near viewport edges.
offset number8Distance in pixels between the trigger and the popover panel.
arrow booleantrueShows a directional arrow pointing at the trigger.
animation 'scale' | 'slide' | 'elastic' | 'flip' | 'bounce' | 'zoom''scale'Open/close animation preset.
trigger *Snippet<[{ toggle: () => void; open: boolean }]>—Trigger snippet. Receives toggle() and open state.
children *Snippet—Popover panel content snippet.