Documentation - Design System

The Popover component provides contextual overlays that appear relative to trigger elements. Perfect for tooltips, dropdown menus, help text, and interactive content that needs precise positioning.

Position Options

Popovers can be positioned relative to their trigger element in four directions

Code

<Popover position="top">
  
  Content here
</Popover>

Position Reference

Complete list of available positioning options and their behavior

Top Centers above trigger, good for tooltips

Right Centers to the right, ideal for inline help

Bottom Centers below trigger, default position

Left Centers to the left, alternative placement

API Reference

Props

Prop	Type	Default	Description
`position`	`'top' \\| 'bottom' \\| 'left' \\| 'right'`	`'bottom'`	Popover position relative to trigger
`closeOnClickOutside`	`boolean`	`true`	Close when clicking outside popover
`closeOnEscape`	`boolean`	`true`	Close when pressing Escape key
`class`	`string`	`''`	Additional CSS classes
`children`	`snippet`	-	Popover content
`trigger`	`snippet`	-	Trigger element (optional)

Positioning

Top: Centers above the trigger element
Bottom: Centers below the trigger element (default)
Left: Centers to the left of the trigger element
Right: Centers to the right of the trigger element

Usage Examples

<script>
  import Popover from '$lib/shared/components/overlays/Popover.svelte';
</script>

<Popover position="bottom">
  {#snippet trigger()}
    <button>Click me</button>
  {/snippet}

  <div>
    <h4>Popover Title</h4>
    <p>This is the popover content.</p>
  </div>
</Popover>

<Popover position="top">
  {#snippet trigger()}
    <Icon src="/svg/help.svg" size={16} />
  {/snippet}

  <div>
    <p>This field accepts email addresses only.</p>
  </div>
</Popover>

<Popover position="bottom">
  {#snippet trigger()}
    <button>
      Account
      <Icon src="/svg/chevron-down.svg" size={16} />
    </button>
  {/snippet}

  <div class="menu">
    <a href="/profile">Profile</a>
    <a href="/settings">Settings</a>
    <a href="/logout">Sign Out</a>
  </div>
</Popover>

<Popover position="bottom">
  {#snippet trigger()}
    <button>
      <Icon src="/svg/more.svg" size={16} />
    </button>
  {/snippet}

  <div class="action-menu">
    <button onclick={edit}>
      <Icon src="/svg/edit.svg" size={16} />
      Edit
    </button>
    <button onclick={duplicate}>
      <Icon src="/svg/copy.svg" size={16} />
      Duplicate
    </button>
    <button onclick={deleteItem} class="danger">
      <Icon src="/svg/trash.svg" size={16} />
      Delete
    </button>
  </div>
</Popover>

<Popover position="bottom">
  {#snippet trigger()}
    <button>Quick Add</button>
  {/snippet}

  <form onsubmit|preventDefault={handleSubmit}>
    <div class="form-field">
      <label>Name</label>
      <input type="text" bind:value={name} />
    </div>
    <div class="form-actions">
      <button type="submit">Add</button>
      <button type="button">Cancel</button>
    </div>
  </form>
</Popover>

<Popover position="bottom">
  {#snippet trigger()}
    <span class="user-mention">@john</span>
  {/snippet}

  <div class="user-card">
    <div class="user-avatar">
      <img src="/avatars/john.jpg" alt="John Doe" />
    </div>
    <div class="user-info">
      <h4>John Doe</h4>
      <p>Senior Developer</p>
      <p class="status online">Online</p>
    </div>
    <div class="user-actions">
      <button>Message</button>
      <button>View Profile</button>
    </div>
  </div>
</Popover>

<Popover position="bottom">
  {#snippet trigger()}
    <button>
      <Icon src="/svg/bell.svg" size={16} />
      {#if notifications.length > 0}
        <span class="badge">{notifications.length}</span>
      {/if}
    </button>
  {/snippet}

  <div class="notifications">
    <h4>Notifications</h4>
    {#each notifications as notification}
      <div class="notification-item">
        <Icon src={notification.icon} size={16} />
        <div>
          <p>{notification.message}</p>
          <span class="time">{notification.time}</span>
        </div>
      </div>
    {/each}
    <div class="notification-footer">
      <button>Mark all as read</button>
    </div>
  </div>
</Popover>