Skip to content
Primer/ViewComponents
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Development
CSSReactViewComponents
About
Getting started
ContributingSystem argumentsMigrationStatuses
Components
AutoCompleteAutoCompleteItemAvatarAvatarStackBlankslateBorderBoxBoxBreadcrumbButtonButtonGroupButtonMarketingClipboardCopyCloseButtonCounterDetailsDropdownDropdownMenuFlashFlexFlexItemHeadingHiddenTextExpanderImageCropIconButtonLabelLayoutLinkMenuMarkdownOcticonOcticonSymbolsPopoverProgressBarSpinnerStateSubheadTabContainerTabNavTextTimeAgoTimelineItemTooltipTruncateUnderlineNav
GitHub

Popover

Table of contents
Beta
View sourceView storybook
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
Edit this page on GitHub