Popover

Display supplementary content or information when users interact with specific elements.

	<script lang="ts">
  import { Popover, Separator, Toggle } from "$lib";
  import { ImageSquare, LinkSimpleHorizontalBreak } from "$icons/index.js";
  import { flyAndScale } from "@/utils";
 
  let width = 1024;
  let height = 768;
</script>
 
<Popover.Root>
  <Popover.Trigger
    class="inline-flex h-10
  items-center justify-center whitespace-nowrap rounded-input bg-dark px-[21px] text-[15px] font-medium text-background shadow-mini transition-all hover:cursor-pointer hover:bg-dark/95 active:scale-98"
  >
    Resize
  </Popover.Trigger>
  <Popover.Content
    class="z-30 w-full max-w-[328px] rounded-[12px] border border-dark-10 bg-background p-4 shadow-popover"
    transition={flyAndScale}
    sideOffset={8}
  >
    <div class="flex items-center">
      <div
        class="mr-3 flex size-12 items-center justify-center rounded-full bg-muted"
      >
        <ImageSquare class="size-6" />
      </div>
      <div class="flex flex-col">
        <h4 class="text-[17px] font-semibold leading-5 tracking-[-0.01em]">
          Resize image
        </h4>
        <p class="text-sm font-medium text-muted-foreground">
          Resize your photos easily
        </p>
      </div>
    </div>
    <Separator.Root class="-mx-4 mb-6 mt-[17px] block h-px bg-dark-10" />
    <div class="flex items-center pb-2">
      <div class="mr-2 flex items-center">
        <div class="relative mr-2">
          <span class="sr-only">Width</span>
          <span
            aria-hidden
            class="absolute left-5 top-4 text-xxs text-muted-foreground">W</span
          >
          <input
            type="number"
            class="h-input w-[119px] rounded-10px border border-border-input bg-background pl-10 pr-2 text-sm text-foreground"
            bind:value={width}
          />
        </div>
        <div class="relative">
          <span class="sr-only">Height</span>
          <span
            aria-hidden
            class="absolute left-5 top-4 text-xxs text-muted-foreground">H</span
          >
          <input
            type="number"
            class="h-input w-[119px] rounded-10px border border-border-input bg-background pl-10 pr-2 text-sm text-foreground"
            bind:value={height}
          />
        </div>
      </div>
      <Toggle.Root
        aria-label="toggle constrain portions"
        class="inline-flex size-10 items-center justify-center rounded-[9px] bg-background transition-all hover:bg-muted active:scale-98 data-[state=on]:bg-muted"
      >
        <LinkSimpleHorizontalBreak class="size-6" />
      </Toggle.Root>
    </div>
  </Popover.Content>
</Popover.Root>

Structure

	<script lang="ts">
  import { Popover } from "bits-ui";
</script>
 
<Popover.Root>
  <Popover.Trigger />
  <Popover.Content>
    <Popover.Close />
    <Popover.Arrow />
  </Popover.Content>
</Popover.Root>

Controlled Usage

If you want to control or be aware of the open state of the popover from outside of the component, you can bind to the open prop.

	<script lang="ts">
  import { Popover } from "bits-ui";
  let popoverOpen = false;
</script>
 
<button on:click={() => (popoverOpen = true)}>Open</button>
<Popover.Root bind:open={popoverOpen}>
  <Popover.Trigger />
  <Popover.Content>
    <Popover.Close />
    <Popover.Arrow />
  </Popover.Content>
</Popover.Root>

API Reference

Popover.Root

The root component used to manage the state of the state of the popover.

Property	Type	Description
`disableFocusTrap`	`boolean`	Whether or not to disable the focus trap that is applied to the popover when it's open. `Default: false`
`preventScroll`	`boolean`	Whether or not to prevent scrolling the body while the popover is open. `Default: false`
`closeOnOutsideClick`	`boolean`	Whether or not to close the popover when clicking outside of it. `Default: true`
`closeOnEscape`	`boolean`	Whether or not to close the popover when pressing the escape key. `Default: true`
`open`	`boolean`	The open state of the link popover component. `Default: false`
`onOpenChange`	`function`	A callback that fires when the open state changes. `Default: —— undefined`
`openFocus`	`FocusProp`	Override the focus when the popover is opened. `Default: —— undefined`
`closeFocus`	`FocusProp`	Override the focus when the popover is closed. `Default: —— undefined`
`portal`	`union`	Where to render the popover when it is open. Defaults to the body. Can be disabled by passing `null` `Default: —— undefined`
`onOutsideClick`	`function`	A callback function called when a click occurs outside of the element. If `event.preventDefault()` is called, the default behavior of closing the element will be prevented. `Default: —— undefined`

Slot Property	Type	Description
`ids`	`object`	The ids of the elements within the component, useful when you don't necessarily want to provide a custom ID, but still want access to the ID being assigned (if any).

Popover.Trigger

A component which toggles the opening and closing of the popover on press.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-state`	`enum`	The open state of the link preview.
`data-popover-trigger`	`——`	Present on the trigger element.

Popover.Content

The contents of the popover which are displayed when the popover is open.

Property	Type	Description
`transition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`transitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`inTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`inTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`outTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`outTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`side`	`enum`	The preferred side of the anchor to render against when open. Will be reversed when collisions occur. Floating UI reference. `Default: —— undefined`
`sideOffset`	`number`	The amount of offset to apply to the menu's position on the x-axis. Floating UI reference. `Default: 0`
`align`	`enum`	The preferred alignment of the anchor to render against when open. Floating UI reference. `Default: —— undefined`
`alignOffset`	`number`	An offset in pixels from the 'start' or 'end' alignment options. Floating UI reference. `Default: 0`
`avoidCollisions`	`boolean`	When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges. Floating UI reference. `Default: true`
`collisionBoundary`	`union`	A boundary element or array of elements to check for collisions against. Floating UI reference. `Default: —— undefined`
`collisionPadding`	`number`	The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision. Floating UI reference. `Default: 0`
`fitViewport`	`boolean`	Whether the floating element should be constrained to the viewport. Floating UI reference. `Default: false`
`sameWidth`	`boolean`	Whether the content should be the same width as the trigger. Floating UI reference. `Default: false`
`strategy`	`enum`	The positioning strategy to use for the floating element. Floating UI reference. `Default: absolute`
`overlap`	`boolean`	Whether the floating element can overlap the reference element. Floating UI reference. `Default: false`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-state`	`enum`	The open state of the popover.
`data-popover-content`	`——`	Present on the content element.

Popover.Close

A button which closes the popover when pressed and is typically placed in the content.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-popover-close`	`——`	Present on the close button.

Popover.Arrow

An optional arrow element which points to the trigger when the popover is open.

Property	Type	Description
`size`	`number`	The height and width of the arrow in pixels. `Default: 8`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-arrow`	`——`	Present on the arrow element.
`data-popover-arrow`	`——`	Present on the arrow element.