Skip to content

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_argumentsHashN/ASystem arguments

Slots

Heading

The heading

NameTypeDefaultDescription
tagSymbol:h4One of :h1, :h2, :h3, :h4, :h5, or :h6.
system_argumentsHashN/ASystem arguments

Body

The body

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

Examples

Default

Activity feed

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

Large

Activity feed

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

Caret position

Activity feed

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

With HTML body

Activity feed

This is the Popover body.

This is using HTML.
  • Thing #1
  • Thing #2
<%= render Primer::PopoverComponent.new do |component| %>
<% component.heading do %>
Activity feed
<% end %>
<% component.body(caret: :left) do %>
<p> This is the Popover body.</p>
<div>
This is using HTML.
<ul>
<li>Thing #1</li>
<li>Thing #2</li>
</ul>
</div>
<% end %>
<% end %>