Popover - Skeleton

<script>
  import { Popover, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<Popover>
  <Popover.Trigger class="btn preset-filled">Trigger</Popover.Trigger>
  <Portal>
    <Popover.Positioner>
      <Popover.Content class="card max-w-md p-4 bg-surface-100-900 shadow-xl space-y-2">
        <Popover.Title class="font-bold">Example</Popover.Title>
        <Popover.Description>This is a basic example of a popover.</Popover.Description>
        <Popover.CloseTrigger class="btn preset-tonal">Close</Popover.CloseTrigger>
      </Popover.Content>
    </Popover.Positioner>
  </Portal>
</Popover>

Arrow

You may optionally enable arrows via the Arrow and ArrowTip component parts. Note that Zag.js opts to style these with CSS custom properties, which can be adjusted using a style attribute.

<script>
  import { Popover, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<Popover>
  <Popover.Trigger class="btn preset-filled">Trigger</Popover.Trigger>
  <Portal>
    <Popover.Positioner>
      <Popover.Content class="card max-w-md p-4 bg-surface-100-900 shadow-xl space-y-2">
        <Popover.Description>This example will have a small arrow.</Popover.Description>
        <Popover.Arrow style="--arrow-size: calc(var(--spacing) * 2); --arrow-background: var(--color-surface-100-900);">
          <Popover.ArrowTip />
        </Popover.Arrow>
      </Popover.Content>
    </Popover.Positioner>
  </Portal>
</Popover>

Z-Index

By default we do not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the Positioner component part.

NOTE: This will need to be forced using ! for !important to override the Zag.js defaults.

Sibling (10)

<script>
  import { Popover, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="grid grid-cols-2 gap-4">
  <Popover>
    <Popover.Trigger class="btn preset-filled">Default (auto)</Popover.Trigger>
    <Portal>
      <Popover.Positioner>
        <Popover.Content class="card max-w-md p-4 bg-surface-100-900 space-y-2">
          <Popover.Description>This example will be below the sibling.</Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Portal>
  </Popover>

  <Popover>
    <Popover.Trigger class="btn preset-filled">Above (20)</Popover.Trigger>
    <Portal>
      <Popover.Positioner class="z-20!">
        <Popover.Content class="card max-w-md p-4 bg-surface-100-900 shadow-xl space-y-2">
          <Popover.Description>This example will be above the sibling.</Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Portal>
  </Popover>

  <div class="col-span-2 h-[100px] relative">
    <div class="rounded bg-primary-200-800/75 w-full h-full z-10 flex justify-center items-center absolute">Sibling (10)</div>
  </div>
</div>

Programmatic Control

This is made possible via the Provider Pattern.

<script>
  import { Popover, Portal, usePopover } from '@skeletonlabs/skeleton-svelte';

  const id = $props.id();
  const popover = usePopover({
    id: id,
    closeOnInteractOutside: false,
  });

  function showAndHide() {
    popover().setOpen(true);
    setTimeout(() => {
      popover().setOpen(false);
    }, 3000);
  }
</script>

<div class="flex flex-col gap-4">
  <button class="btn preset-filled" onclick={showAndHide}>Show for 3 seconds</button>

  <Popover.Provider value={popover}>
    <Popover.Trigger class="btn preset-tonal">Anchor</Popover.Trigger>
    <Portal>
      <Popover.Positioner>
        <Popover.Content class="card max-w-sm p-4 bg-surface-100-900 shadow-xl space-y-2">
          <Popover.Description>This popover will appear, stay open for three seconds, then close on it's own.</Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Portal>
  </Popover.Provider>
</div>

Direction

<script>
  import { Popover, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<Popover dir="rtl">
  <Popover.Trigger class="btn preset-filled">Trigger</Popover.Trigger>
  <Portal>
    <Popover.Positioner>
      <Popover.Content class="card max-w-md p-4 bg-surface-100-900 shadow-xl space-y-2">
        <Popover.Title class="font-bold">Example</Popover.Title>
        <Popover.Description>This is a basic example of a popover.</Popover.Description>
        <Popover.CloseTrigger class="btn preset-tonal">Close</Popover.CloseTrigger>
      </Popover.Content>
    </Popover.Positioner>
  </Portal>
</Popover>

Headless

Unlike most components in Skeleton, this feature is provided “headless”. This means no default styles are applied out of the box. This ensures you retain full control of all styling.

<script>
  import { SkullIcon } from '@lucide/svelte';
  import { Popover, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<Popover>
  <Popover.Trigger>
    <SkullIcon class="size-12" />
  </Popover.Trigger>
  <Portal>
    <Popover.Positioner>
      <Popover.Content>
        <div class="card border border-surface-500/30 bg-surface-200-800/30 backdrop-blur-sm max-w-md p-2 space-y-2 shadow-xl">
          <header class="flex justify-between items-center">
            <Popover.Title class="font-bold">Hello Skeleton</Popover.Title>
            <Popover.CloseTrigger class="btn-icon hover:preset-tonal">&times</Popover.CloseTrigger>
          </header>
          <img
            class="size-72"
            src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExNWVmbzcxanp6YmtxZ28xcXBqaXBscThsdDZ5Nm9ncWxkeWtqaHJ2bSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9dg/dn1PN6NtunfnUjUGFC/giphy.gif"
            alt="Skeleton Gif"
          />
          <Popover.Description class="text-xs text-center">Three spooky skeletons!</Popover.Description>
        </div>
      </Popover.Content>
    </Popover.Positioner>
  </Portal>
</Popover>

The benefits are as follows:

You can make the Trigger surround any element, including an icon, button, image, etc.
You can modify the entire structure within Content, including custom markup and styling.
You may place the CloseTrigger anywhere, and use it as an X close option.

API Reference

Root

Property	Default	Type
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`ids`	-	Partial<{ anchor: string; trigger: string; content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }> \| undefined The ids of the elements in the popover. Useful for composition.
`modal`	false	boolean \| undefined Whether the popover should be modal. When set to `true`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover
`portalled`	true	boolean \| undefined Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content.
`autoFocus`	true	boolean \| undefined Whether to automatically set focus on the first focusable content within the popover when opened.
`initialFocusEl`	-	(() => HTMLElement \| null) \| undefined The element to focus on when the popover is opened.
`closeOnInteractOutside`	true	boolean \| undefined Whether to close the popover when the user clicks outside of the popover.
`closeOnEscape`	true	boolean \| undefined Whether to close the popover when the escape key is pressed.
`onOpenChange`	-	((details: OpenChangeDetails) => void) \| undefined Function invoked when the popover opens or closes
`positioning`	-	PositioningOptions \| undefined The user provided options used to position the popover content
`open`	-	boolean \| undefined The controlled open state of the popover
`defaultOpen`	-	boolean \| undefined The initial open state of the popover when rendered. Use when you don't need to control the open state of the popover.
`getRootNode`	-	(() => Node \| ShadowRoot \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`onEscapeKeyDown`	-	((event: KeyboardEvent) => void) \| undefined Function called when the escape key is pressed
`onRequestDismiss`	-	((event: LayerDismissEvent) => void) \| undefined Function called when this layer is closed due to a parent layer being closed
`onPointerDownOutside`	-	((event: PointerDownOutsideEvent) => void) \| undefined Function called when the pointer is pressed down outside the component
`onFocusOutside`	-	((event: FocusOutsideEvent) => void) \| undefined Function called when the focus is moved outside the component
`onInteractOutside`	-	((event: InteractOutsideEvent) => void) \| undefined Function called when an interaction happens outside the component
`persistentElements`	-	(() => Element \| null)[] \| undefined Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
`children`	-	Snippet<[]> \| undefined The default slot content to be rendered within the component.

RootProvider

Property	Default	Type
`value`	-	() => PopoverApi<PropTypes>
`children`	-	Snippet<[]> \| undefined The default slot content to be rendered within the component.

RootContext

Property	Default	Type
`children`	-	Snippet<[() => PopoverApi<PropTypes>]>

Trigger

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

Positioner

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Content

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Arrow

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ArrowTip

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Title

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Description

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

CloseTrigger

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself