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

Popover

Table of contents
Alpha
View source
Table of contents

Use popovers 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

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

Large

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

Caret position

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

Arguments

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

heading slot

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

body slot

NameTypeDefaultDescription
caretSymbolCARET_DEFAULTOne of :top, :bottom, :bottom_right, :bottom_left, :left, :left_bottom, :left_top, :right, :right_bottom, :right_top, :top_left, or :top_right.
largeBooleanfalseWhether to use the large version of the component.
system_argumentsHashN/ASystem arguments
Edit this page on GitHub