4.5.1






Popover

Default

Click Me.

Close
<span id='regular-popover-1'>Click Me.</span>
<%= pb_rails("popover", props: {trigger_element_id: "regular-popover-1", tooltip_id: "tooltip-1", position: 'right', offset: false }) do %>
    Whoa. I'm a popover.
<% end %>




With Button


Close
<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", id: 'regular-popover-3' }) %>
<%= pb_rails("popover", props: {trigger_element_id: "regular-popover-3", tooltip_id: "tooltip-3", position: 'bottom', offset: true }) do %>
    Whoa. I'm a popover.
<% end %>
With any children


Close
<div style="height: 400px; text-align: center;">
<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", id: 'list' }) %>
<%= pb_rails("popover", props: {trigger_element_id: "list", tooltip_id: "list-tooltip", position: 'bottom', offset: true }) do %>
    <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
    <%= pb_rails("list/item") do %><a>Popularity</a><% end %>
    <%= pb_rails("list/item") do %><a>Title</a><% end %>
    <%= pb_rails("list/item") do %><a>Duration</a><% end %>
    <%= pb_rails("list/item") do %><a>Date Started</a><% end %>
    <%= pb_rails("list/item") do %><a>Date Ended </a><% end %>
    <% end %>
<% end %>
</div>

Available Props
id
data
classname
aria
children
position
trigger_element_id
tooltip_id
offset