Skip to content

Popover

Use popovers 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.

Examples

Default

<%= render Primer::PopoverComponent.new do |component| %>
<% component.slot(:heading) do %>
Activity feed
<% end %>
<% component.slot(:body) do %>
This is the Popover body.
<% end %>
<% end %>

Large

<%= render Primer::PopoverComponent.new do |component| %>
<% component.slot(:heading) do %>
Activity feed
<% end %>
<% component.slot(:body, large: true) do %>
This is the large Popover body.
<% end %>
<% end %>

Caret position

<%= render Primer::PopoverComponent.new do |component| %>
<% component.slot(:heading) do %>
Activity feed
<% end %>
<% component.slot(:body, caret: :left) do %>
This is the large Popover body.
<% end %>
<% end %>

Arguments

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

heading slot

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

body slot

NameTypeDefaultDescription
caretSymbolCARET_DEFAULTOne of :top, :bottom, :bottom_right, :bottom_left, :left, :left_bottom, :left_top, :right, :right_bottom, :right_top, :top_left, or :top_right.
largeBooleanfalseWhether to use the large version of the component.
system_argumentsHashN/ASystem arguments