Skip to content

Popover

Table of contents
Table of contents

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.

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 %>

Arguments

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Slots

Heading

The heading

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Body

The body

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