Hover Card Edit

<%= render_hover_card do %>
  <%= hover_card_trigger do %>
    <%= content_tag :span, "@rails" %>
  <% end %>
  <%= hover_card_content do %>
    <div class="grid gap-2">
      <div class="space-y-2">
        <h4 class="font-medium leading-none">Ruby on Rails</h4>
        <p class="text-sm text-muted-foreground">The Web framework that changed the world.</p>
      </div>
    </div>
  <% end %>
<% end %>

Installation

  rails generate shadcn-ui hover-card

Usage

<%= render_hover_card do %>
  <%= hover_card_trigger do %>
  <% end %>
  <%= hover_card_content do %>
  <% end %>
<% end %>

The Hover Card component introduces:

• app/helpers/components/hover_card_helper.rb
• app/views/components/ui/_hover_card.html.erb
• app/javascript/controllers/ui/hover-card_controller.js

The method render_hover_card defined in app/helpers/components/hover_card_helper.rb accepts a block for the two inner components, hover_card_trigger and hover_card_content. Each of those accepts a block for their respective content.

app/javascript/controllers/ui/hover-card_controller.js is a stimulus controller that provides the functionality of the popover.