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

Popover.Root

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`

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`

Data Attribute	Value/Description
`data-state`	The open state of the link preview. `Value: 'open' \| 'closed'`

Popover.Content

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`

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`

Popover.Arrow

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 🚧