Popover

A floating panel that appears next to a trigger element, commonly used for displaying additional content or forms.

Anatomy 

<script>
  import {
    Popover,
    PopoverTrigger,
    PopoverContent,
    PopoverHeader,
    PopoverBody,
    PopoverFooter,
    PopoverTitle,
    PopoverDescription,
    PopoverArrow,
    PopoverCloseTrigger,
  } from "@saas-ui/svelte/components/popover";
</script>

<Popover.Root>
  <PopoverTrigger triggerText="Open Popover" />
  <PopoverContent>
    <PopoverArrow />
    <PopoverHeader>
      <PopoverTitle>Popover Title</PopoverTitle>
      <PopoverCloseTrigger />
    </PopoverHeader>
    <PopoverBody>
      <PopoverDescription>Popover content goes here.</PopoverDescription>
    </PopoverBody>
    <PopoverFooter>Footer content</PopoverFooter>
  </PopoverContent>
</Popover.Root>

Examples

Basic Accessibility

Basic popover with form content and close button.

Controlled Accessibility

Controlled popover with external state management using the open prop.

Form Accessibility

Popover containing a form layout for inline editing or quick actions.

Initial Focus Accessibility

Popover with initial focus on a specific element using initialFocusEl.

Lazy Mounted Accessibility

Lazy mounted popover that only renders content when opened and unmounts on close.

Nested Accessibility

Nested popovers demonstrating popover within popover functionality.

Offset Accessibility

Popover with custom offset distance from the trigger element.

Placement Accessibility

Popover with custom placement relative to the trigger element.

Same Width Accessibility

Popover that matches the width of its trigger element.

Sizes Accessibility

Popover in different sizes. Available sizes: xs, sm, md, lg.

Props

Popover.Root

The root container component for the popover.

Prop Type Default Description
children Snippet - The popover content.
id string - The unique identifier for the popover.
size "xs" | "sm" | "md" | "lg" "md" The size of the popover.
open boolean - Whether the popover is open.
onOpenChange (details: { open: boolean }) => void - Handler called when the open state changes.
autoFocus boolean true Whether to automatically set focus on the first focusable content when opened.
closeOnEscape boolean true Whether to close when the escape key is pressed.
closeOnInteractOutside boolean true Whether to close when clicking outside.
modal boolean false Whether the popover should be modal.
portalled boolean true Whether the popover is portalled.
lazyMount boolean false Whether to enable lazy mounting.
unmountOnExit boolean false Whether to unmount on exit.
positioning PopoverRootProps['positioning'] { placement: "bottom", gutter: 12 } The positioning options for the popover.
initialFocusEl () => HTMLElement | null - Element to receive focus when the popover is opened.
onPrefetch () => void - Callback invoked when hovering over the trigger (for prefetching content). Similar to Astro's link prefetching, this allows preloading data before opening.

Popover.Trigger

The trigger element that opens the popover.

Prop Type Default Description
children Snippet<[{ props: () => Record<string, any> }]> - The trigger element. Receives trigger props that must be spread onto an interactive element. Optional when using triggerText or triggerIcon.
triggerText string - Simple text to display on the trigger button.
triggerIcon Component - Icon component to display on the trigger button.
triggerVariant "ghost" | "outline" | "solid" | "subtle" | "plain" "outline" Variant for the auto-generated trigger button.
triggerSize "xs" | "sm" | "md" | "lg" "sm" Size for the auto-generated trigger button.
triggerClass string - CSS classes to apply to the auto-generated trigger button.
class string - Additional CSS classes to apply.

Popover.Content

The content container of the popover.

Prop Type Default Description
children Snippet - The content to display in the popover.
class string - Additional CSS classes to apply.

Popover.Header

The header section of the popover.

Prop Type Default Description
children Snippet - The header content.
class string - Additional CSS classes to apply.

Popover.Body

The body section of the popover.

Prop Type Default Description
children Snippet - The body content.
class string - Additional CSS classes to apply.

Popover.Footer

The footer section of the popover.

Prop Type Default Description
children Snippet - The footer content.
class string - Additional CSS classes to apply.

Popover.Title

The title element of the popover.

Prop Type Default Description
children Snippet - The title content.
class string - Additional CSS classes to apply.

Popover.Description

The description element of the popover.

Prop Type Default Description
children Snippet - The description content.
class string - Additional CSS classes to apply.

Popover.Arrow

The arrow element pointing to the trigger.

Prop Type Default Description
class string - Additional CSS classes to apply.

Popover.CloseTrigger

The close button for the popover.

Prop Type Default Description
children Snippet<[() => Record<string, unknown>]> - Custom content for the close trigger. Receives trigger props that must be spread onto an interactive element.
buttonText string - Simple text to display on the close button (creates a text button instead of icon).
buttonVariant "ghost" | "outline" | "solid" | "subtle" | "plain" "ghost" Variant for the auto-generated button when using buttonText.
buttonSize "xs" | "sm" | "md" | "lg" "sm" Size for the auto-generated button when using buttonText.
class string - Additional CSS classes to apply.
aria-label string "Close" Accessible label for the close button.