Skip to content
Primer/ViewComponents
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactViewComponents
ContributeAbout
Getting started
ContributingSystem argumentsLintingMigrationStatuses
Components
AutoCompleteAutoCompleteItemAvatarAvatarStackBlankslateBorderBoxBoxBreadcrumbsButtonButtonGroupButtonMarketingClipboardCopyCloseButtonCounterDetailsDropdownDropdownMenuFlashFlexFlexItemHeadingHiddenTextExpanderImageImageCropIconButtonLabelLayoutLinkLocalTimeMenuMarkdownOcticonOcticonSymbolsPopoverProgressBarSpinnerStateSubheadTabContainerTabNavTabPanelsTextTimeAgoTimelineItemTooltipTruncateUnderlineNavUnderlinePanels
GitHub
On this page

Popover

Beta
View sourceView storybook
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

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 %>
Edit this page on GitHub