Popover

Use popover to bring attention to specific user interface elements and suggest an action or to guide users through a new experience.

Beta
Not reviewed for accessibility

On this page

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

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	System arguments

Slots

`heading`

The heading

Name	Type	Default	Description
`tag`	`Symbol`	`:h4`	One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`.
`system_arguments`	`Hash`	N/A	System arguments

`body`

The body

Name	Type	Default	Description
`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

Examples

Default

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

Large

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

Caret position

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

With multiple elements in the body

<%= render Primer::Beta::Popover.new do |component| %>
  <% component.with_heading do %>
    Activity feed
  <% end %>
  <% component.with_body(caret: :left) do %>
    <p>This is the Popover body.</p>
    <%= render Primer::ButtonComponent.new(type: :submit) do %>
      Got it!
    <% end %>
  <% end %>
<% end %>

Edit this page on GitHub