Simple summary
View
<table class="table">
<thread>
<th>Name</th>
<th>Manager</th>
<th>Actions</th>
</thread>
<tbody>
<% @projects.each do |project| %>
<tr>
<td>
<%= link_to project.name, project_path(project) %>
</td>
<td>
<%= coupdoeil_popover_tag ManagerPopover.with(manager: project.manager).summary do %>
<span class="underline decoration-dotted"><%= project.manager.first_name %></span>
<% end %>
</td>
<td>
<button type="button" class="btn">actions</button>
</td>
</tr>
<% end %>
</tbody>
</table>
Popover class
# app/popovers/manager_popover.rb
class ManagerPopover < ApplicationPopover
def summary
@manager = params[:manager]
end
end
Popover template
<%# app/popovers/manager_popover/summary.html.erb %>
<div class="flex">
<div class="mr-4 shrink-0 avatar">
<div class="size-16 rounded-full">
<%= image_tag @manager.avatar %>
</div>
</div>
<div>
<h4 class="text-lg font-semibold"><%= @manager.full_name %></h4>
<%= mail_to @manager.email, class: "italic text-sm" %>
<div class="mt-2 text-sm">
<span class="mr-1">🦆</span>Member of <%= link_to "Duck family", "/ducks", class: "link" %>
</div>
</div>
</div>
Popover layout
<%# app/popovers/layouts/popover.html.erb (default layout) %>
<div
style="
background: white;
padding: 1rem;
border: 1px solid rgb(209 213 219);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
width: max-content;
max-width: 24rem;
border-radius: 0.25rem;
"
>
<div data-popover-arrow style="--co-popover--height: 0.5rem;"></div>
<%= yield %>
</div>
Generated with:
rails generate coupdoeil:popover Manager summary