Popover Title
Here's some amazing content. It's very engaging.
Usage
<%= ui.popover do %>
<%= ui.popover_trigger "Open", as: :btn %>
<%= ui.popover_content(title: "Title") do %>
Popover content here
<% end %>
<% end %>
# <% With placement %>
<%= ui.popover(placement: :right) do %>
<%= ui.popover_trigger "Open Right", as: :btn %>
<%= ui.popover_content do %>
Content appears to the right
<% end %>
<% end %>Props
| Prop | Type | Default | Description |
|---|---|---|---|
placement | Symbol:top | :right | :bottom | :left | :bottom | Position of the popover relative to the trigger element. |
Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.
SubcomponentsUse subcomponents below or any HTML.
| Name | Helper | Description |
|---|---|---|
popover_trigger | ui.popover_trigger | The element that triggers the popover on click. |
popover_content | ui.popover_content | The floating panel content displayed when triggered. |
Examples
Default Popover
Popover Default
And here's some amazing content. It's very engaging.
<%= ui.popover do %>
<%= ui.popover_trigger "Default popover", as: :btn %>
<%= ui.popover_content(title: "Popover Default") do %>
And here's some amazing content. It's very engaging.
<% end %>
<% end %>Placement Right
Popover Right
And here's some amazing content. It's very engaging.
<%= ui.popover(placement: :right) do %>
<%= ui.popover_trigger "Popover Right", as: :btn, variant: :outline %>
<%= ui.popover_content(title: "Popover Right") do %>
And here's some amazing content. It's very engaging.
<% end %>
<% end %>Placement Top
Popover Top
This popover appears above the button.
<%= ui.popover(placement: :top) do %>
<%= ui.popover_trigger "Popover Top", as: :btn, variant: :secondary %>
<%= ui.popover_content(title: "Popover Top") do %>
This popover appears above the button.
<% end %>
<% end %>Multiple Placements
Popover Default
And here's some amazing content. It's very engaging.
Popover Right
And here's some amazing content. It's very engaging.
Popover Top
This popover appears above the button.
<div class="flex gap-4">
<%= ui.popover do %>
<%= ui.popover_trigger "Default popover", as: :btn %>
<%= ui.popover_content(title: "Popover Default") do %>
And here's some amazing content. It's very engaging.
<% end %>
<% end %>
<%= ui.popover(placement: :right) do %>
<%= ui.popover_trigger "Popover Right", as: :btn, variant: :outline %>
<%= ui.popover_content(title: "Popover Right") do %>
And here's some amazing content. It's very engaging.
<% end %>
<% end %>
<%= ui.popover(placement: :top) do %>
<%= ui.popover_trigger "Popover Top", as: :btn, variant: :secondary %>
<%= ui.popover_content(title: "Popover Top") do %>
This popover appears above the button.
<% end %>
<% end %>
</div>