Simple summary

View

<%#  app/views/projects/index.html.erb %>

<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