Quick form

View

<table class="table">
  <thread>
    <th>Name</th>
    <th>Manager</th>
    <th>Actions</th>
    <th>Notifications</th>
  </thread>
  <tbody>
    <% @projects.each do |project| %>
      <tr>
        <td>
          <%= link_to project.name, project_path(project) %>
        </td>
        <td>
          <%= project.manager %>
        </td>
        <td>
          <button type="button" class="btn">actions</button>
        </td>
        <td class="w-12 text-center">
          <%= coupdoeil_hovercard_tag Project::NotificationsHovercard.with(project:).settings do %>
            <%= button_tag "🔔", type: :button, class: "text-center cursor-pointer w-8" %>
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

NB: Bell emoji is pretty small so button has a fixed width so the hovercard is better placed below the center of the emoji.

Hovercard class

# app/hovercards/projects/notifications

class Project
  class NotificationsHovercard < ApplicationHovercard
    layout "menu"

    default_options trigger: :click, placement: "bottom-end, top-end", offset: "0.5rem"

    def settings
      @project = params[:project]
    end
  end
end

Hovercard template

<%# app/hovercards/projects/notifications/settings.html.erb %>

<div class="rounded">
  <div class="border-b border-gray-300 p-3 flex justify-between gap-4">
    <h4>Notification settings</h4>
    <%= button_tag "⨉", 
                   class: "btn btn-xs flex justify-center items-center", 
                   data: { hovercard_close: true } %>
  </div>
  <%= form_with [@project, :notifications] do |f| %>
    
    <%# ...  %>
    
    <div class="border-t border-gray-300 p-3 flex justify-between gap-4">
      <%= f.submit "Save", data: { hovercard_close: true } %>
    </div>
  <% end %>
</div>

Hovercard layout

<%# app/hovercards/layouts/menu.html.erb (custom layout) %>

<div style="background-color: white;
            border-radius: 4px; 
            border: 1px solid rgba(0, 0, 0, 0.2); 
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);"
>
  <%= yield %>
</div>

Generated with:

rails generate coupdoeil:hovercard Project/Notifications settings