Hover Card Edit

For sighted users to preview content available behind a link.




  rails generate shadcn-ui hover-card


<%= 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.