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.
Name | Type | Default | Description |
---|---|---|---|
system_arguments | Hash | N/A | System arguments |
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 |
<%= 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 %>
<%= 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 %>
<%= 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 %>
This is the Popover 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 %>