Popover

Display rich content in a portal, triggered by a button.

Usage

To create a popover, import and compose <Popover>, <PopoverTrigger>, and <PopoverContent>.

import { Button } from "stylus-ui/Button";
import { Popover, PopoverContent, PopoverTrigger } from "stylus-ui/Popover";
import { Text } from "stylus-ui/Text";

export default () => (
  <Popover>
    <PopoverTrigger asChild>
      <Button variant="secondary">Open Popover</Button>
    </PopoverTrigger>
    <PopoverContent>
      <Text size="sm">This is the content of the popover.</Text>
    </PopoverContent>
  </Popover>
);

Positioning

Positioning of the popover can be modified with side, sideOffset, align, and alignOffset props.

import { Button } from "stylus-ui/Button";
import { Popover, PopoverContent, PopoverTrigger } from "stylus-ui/Popover";
import { Text } from "stylus-ui/Text";

export default () => (
  <Popover>
    <PopoverTrigger asChild>
      <Button variant="secondary">Open Popover</Button>
    </PopoverTrigger>
    <PopoverContent side="top" sideOffset={10} align="start">
      <Text size="sm">
        This popover is positioned on top and aligned to the start.
      </Text>
    </PopoverContent>
  </Popover>
);

API Reference

`Popover`

Displays rich content in a portal, triggered by a button.

`defaultOpen`

boolean

`modal`

boolean

`onOpenChange`

(open: boolean) => void

`open`

boolean

`PopoverAnchor`

An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.

`asChild`

boolean

`virtualRef`

RefObject<Measurable>

`PopoverTrigger`

A button that opens a Popover.

`asChild`

boolean

`PopoverContent`

The content rendered when a Popover is opened after clicking a PopoverTrigger.

`align`

"center" | "end" | "start" = "center"

`alignOffset`

number

`arrowPadding`

number

`asChild`

boolean

`avoidCollisions`

boolean

`collisionBoundary`

null | Element | Boundary[]

`collisionPadding`

number | Partial<Record<"bottom" | "top" | "left" | "right", number>>

`container`

null | Element | DocumentFragment

`forceMount`

true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

`hideWhenDetached`

boolean

`onCloseAutoFocus`

(event: Event) => void

Event handler called when auto-focusing on close. Can be prevented.

`onEscapeKeyDown`

(event: KeyboardEvent) => void

Event handler called when the escape key is down. Can be prevented.

`onFocusOutside`

(event: FocusOutsideEvent) => void

Event handler called when the focus moves outside of the DismissableLayer. Can be prevented.

`onInteractOutside`

(event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.

`onOpenAutoFocus`

(event: Event) => void

Event handler called when auto-focusing on open. Can be prevented.

`onPointerDownOutside`

(event: PointerDownOutsideEvent) => void

Event handler called when the a pointerdown event happens outside of the DismissableLayer. Can be prevented.

`side`

"bottom" | "top" | "left" | "right"

`sideOffset`

number = 12

`sticky`

"partial" | "always"

`updatePositionStrategy`

"always" | "optimized"