Popover

Displays content in a floating container that appears above the surrounding content.

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

Root

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`disableFocusTrap`	`false`	`boolean` Whether or not to disable the focus trap that is applied to the popover when it's open.
`preventScroll`	`false`	`boolean` Whether or not to prevent scrolling the body while the popover is open.
`positioning`	`{ position: "bottom", align: "center" }`	`FloatingConfig` The positioning configuration for the popover. (docs coming soon)
`closeOnOutsideClick`	`true`	`boolean` Whether or not to close the popover when clicking outside of it.
`closeOnEscape`	`true`	`boolean` Whether or not to close the popover when pressing the escape key.
`open`	`false`	`boolean` The open state of the link popover component.
`onOpenChange`	-	`(open: boolean) => void` A callback that fires when the open state changes.

Trigger

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

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

Content

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Close

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Arrow

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`size`	`8`	`number` The height and width of the arrow in pixels.

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

🚧 UNDER CONSTRUCTION 🚧