unstable_Popover API

Import

import { unstable_Popover as Popover } from "@stratakit/structures";
// OR
import Popover from "@stratakit/structures/unstable_Popover";

Popover

Base element: <div>

A component used to display content in a non-modal window overlay that is placed relative to a trigger element.

Example:

<Popover
  content={<>Content</>}
>
  <Button>Open</Button>
</Popover>

children

Type: ReactElement<unknown, string | JSXElementConstructor<any>> (required)

The element that will trigger the popover when clicked. Common examples include buttons, links, or form controls.

Note: The trigger must be a single interactive element. Do not add a popover to a non-interactive static element (such as a <div> or <svg>). Also, the trigger element must forward its ref and spread its props.

content

Type: ReactNode (required)

The content to be displayed inside the popover when the trigger element is hovered or focused.

open

Type: boolean | undefined (optional)

Default: false

Whether the content is visible.

placement

Type: Placement | undefined (optional)

Default: "bottom"

The placement of the popover.

setOpen

Type: ((open: boolean) => void) | undefined (optional)

A callback that gets called when the open state changes.

unmountOnHide

Type: boolean | undefined (optional)

Default: false

When set to true, the content element will be unmounted and removed from the DOM when it’s hidden.

Additional props

• render