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