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
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 Default:
—— undefined |
onOutsideClick | function | A callback function called when a click occurs outside of the element. If 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). |
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 |
| Data Attribute | Value | Description |
|---|---|---|
data-state | enum | The open state of the link preview. |
data-popover-trigger | —— | Present on the trigger element. |
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 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 |
| Data Attribute | Value | Description |
|---|---|---|
data-state | enum | The open state of the popover. |
data-popover-content | —— | Present on the content element. |
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 |
| Data Attribute | Value | Description |
|---|---|---|
data-popover-close | —— | Present on the close button. |
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 |
| 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>