Popover

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

	<script lang="ts">
  import { Popover, Separator, Toggle } from "bits-ui";
  import { ImageSquare, LinkSimpleHorizontalBreak } from "$icons/index.js";
  import { flyAndScale } from "$lib/utils/index.js";
 
  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>

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.

Examples

Controlled

If you want to control or be aware of the open state of the popover from outside of the component, 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>