Popover

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

  • Name@spark-ui/popover
    Version1.1.2
    LicenseMIT
    npmgithubReported IssuesReport a bug
    • UsageProps
    AttributeTypeDescriptionDefault
    openboolean-null
    defaultOpenboolean-null
    onOpenChange(open: boolean) => void-null
    modalboolean-null

    Popover.Trigger#

    The button that toggles the popover. By default, the Popover.Content will position itself against the trigger.

    AttributeTypeDescriptionDefault
    asChildboolean-{"value":false}

    Popover.Anchor#

    An optional element to position the Popover.Content against. If this part is not used, the content will position alongside the Popover.Trigger.

    AttributeTypeDescriptionDefault
    asChildboolean-{"value":false}
    virtualRefRefObject<Measurable>-null

    Popover.Portal#

    When used, portals the content part into the body.

    AttributeTypeDescriptionDefault
    forceMounttrueUsed to force mounting when more control is needed. Useful when controlling animation with React animation libraries.null
    containerHTMLElement-null

    Popover.Content#

    The component that pops out when the popover is open.

    AttributeTypeDescriptionDefault
    forceMounttrueUsed to force mounting when more control is needed. Useful when controlling animation with React animation libraries.null
    asChildboolean-{"value":false}
    side"top" | "right" | "bottom" | "left"-bottom
    sideOffsetnumber-8
    align"center" | "end" | "start"-center
    alignOffsetnumber-null
    arrowPaddingnumber-16
    collisionBoundaryElement | Element[]-null
    collisionPaddingnumber | Partial<Record<"top" | "right" | "bottom" | "left", number>>-{"value":0}
    sticky"partial" | "always"-partial
    hideWhenDetachedboolean-{"value":false}
    avoidCollisionsboolean-
    onEscapeKeyDown(event: KeyboardEvent) => voidEvent handler called when the escape key is down. Can be prevented.null
    onPointerDownOutside(event: PointerDownOutsideEvent) => voidEvent handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.null
    onFocusOutside(event: FocusOutsideEvent) => voidEvent handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.null
    onInteractOutside(event: PointerDownOutsideEvent | FocusOutsideEvent) => voidEvent 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.null
    onOpenAutoFocus(event: Event) => voidEvent handler called when auto-focusing on open. Can be prevented.null
    onCloseAutoFocus(event: Event) => voidEvent handler called when auto-focusing on close. Can be prevented.null
    matchTriggerWidthboolean-{"value":false}
    enforceBoundariesboolean-null
    hasCloseButtonbooleanWhen there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.null

    Popover.Header#

    Header for the popover content. Also serve as an accessible name for the Popover. Must be rendered inside Popover.Content.

    AttributeTypeDescriptionDefault
    classNamestring-null

    Popover.CloseButton#

    The button that closes an open popover.

    AttributeTypeDescriptionDefault
    asChildboolean-null

    Popover.Arrow#

    An optional arrow element to render alongside the popover. This can be used to help visually link the anchor with the Popover.Content. Must be rendered inside Popover.Content.

    AttributeTypeDescriptionDefault
    asChildboolean-{"value":false}