Popover
Displays content in a floating container that appears above the surrounding content.
<script lang="ts">
import * as Popover from "@/components//ui/popover";
import * as Label from "@/components//ui/label";
import * as Button from "@/components//ui/button";
import * as Input from "@/components//ui/input";
import { tick } from "svelte";
let open = false;
</script>
<Popover.Root bind:open let:ids>
<Popover.Trigger asChild let:builder>
<Button.Root builders={[builder]} variant="outline">Open</Button.Root>
</Popover.Trigger>
<Popover.Content class="w-80">
<div class="grid gap-4">
<button
on:click={() => {
open = false;
tick().then(() => {
document.getElementById(ids.trigger)?.focus();
});
}}
>
close me
</button>
<div class="space-y-2">
<h4 class="font-medium leading-none">Dimensions</h4>
<p class="text-sm text-muted-foreground">
Set the dimensions for the layer.
</p>
</div>
<div class="grid gap-2">
<div class="grid grid-cols-3 items-center gap-4">
<Label.Root for="width">Width</Label.Root>
<Input.Root id="width" value="100%" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label.Root for="maxWidth">Max. width</Label.Root>
<Input.Root id="maxWidth" value="300px" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label.Root for="height">Height</Label.Root>
<Input.Root id="height" value="25px" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label.Root for="maxHeight">Max. height</Label.Root>
<Input.Root id="maxHeight" value="none" class="col-span-2 h-8" />
</div>
</div>
</div>
</Popover.Content>
</Popover.Root>
<script lang="ts">
import * as Popover from "@/components//ui/popover";
import * as Label from "@/components//ui/label";
import * as Button from "@/components//ui/button";
import * as Input from "@/components//ui/input";
import { tick } from "svelte";
let open = false;
</script>
<Popover.Root bind:open let:ids>
<Popover.Trigger asChild let:builder>
<Button.Root builders={[builder]} variant="outline">Open</Button.Root>
</Popover.Trigger>
<Popover.Content class="w-80">
<div class="grid gap-4">
<button
on:click={() => {
open = false;
tick().then(() => {
document.getElementById(ids.trigger)?.focus();
});
}}
>
close me
</button>
<div class="space-y-2">
<h4 class="font-medium leading-none">Dimensions</h4>
<p class="text-sm text-muted-foreground">
Set the dimensions for the layer.
</p>
</div>
<div class="grid gap-2">
<div class="grid grid-cols-3 items-center gap-4">
<Label.Root for="width">Width</Label.Root>
<Input.Root id="width" value="100%" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label.Root for="maxWidth">Max. width</Label.Root>
<Input.Root id="maxWidth" value="300px" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label.Root for="height">Height</Label.Root>
<Input.Root id="height" value="25px" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label.Root for="maxHeight">Max. height</Label.Root>
<Input.Root id="maxHeight" value="none" class="col-span-2 h-8" />
</div>
</div>
</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>
<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>
<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>
Component API
The root component used to manage the state of the state of the popover.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default: false |
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 |
positioning | FloatingConfig | The positioning configuration for the popover. (docs coming soon) Default: { position: "bottom", align: "center" } |
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 | (open: boolean) => void | A callback that fires when the open state changes. Default: undefined |
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 |
| Data Attribute | Value/Description |
|---|---|
data-state | The open state of the link preview. Value: 'open' | 'closed' |
The contents of the popover which are displayed when the popover is open.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default: false |
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 |
An optional arrow element which points to the trigger when the popover is open.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default: false |
size | number | The height and width of the arrow in pixels. Default: 8 |
| Data Attribute | Value/Description |
|---|---|
data-arrow | Present on the arrow element. Value: '' |
🚧 UNDER CONSTRUCTION 🚧