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