Skip to content
Primer Design System

Primer Design System

Popover

Popover is used to bring attention to specific user interface elements.

On this page

v0.36.1BetaNot reviewed for accessibility

Description

Use Popover to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.

By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.

Arguments

NameTypeDefaultDescription
system_arguments
Hash

N/A

System arguments

Examples

Slots

heading

The heading

NameTypeDefaultDescription
tag
Symbol

:h4

One of :h1, :h2, :h3, :h4, :h5, or :h6.

system_arguments
Hash

N/A

System arguments

body

The body

NameTypeDefaultDescription
caret
Symbol

N/A

One of :bottom, :bottom_left, :bottom_right, :left, :left_bottom, :left_top, :right, :right_bottom, :right_top, :top, :top_left, or :top_right.

large
Boolean

N/A

Whether to use the large version of the component.

system_arguments
Hash

N/A

System arguments