Components / Hover Card

Hover Card

Stable Stimulus: senren--hover-card

user hover previews

@senren_ui

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../hover_card_example.html.erb

<div class="flex w-full justify-center">
  <%= render Senren::HoverCardComponent.new do |h| %>
    <% h.with_trigger do %>
      <%= render(Senren::LinkComponent.new(href: "#")) { "@senren_ui" } %>
    <% end %>
    <% h.with_content_panel do %>
      <div class="flex items-start gap-3">
        <%= render Senren::AvatarComponent.new(initials: "SU", size: :md) %>
        <div>
          <p class="font-display text-sm font-semibold">Senren UI</p>
          <p class="text-xs text-[hsl(var(--senren-muted-foreground))]">Refined Rails UI</p>
        </div>
      </div>
    <% end %>
  <% end %>
</div>

Install this component #

Copy the official component into your app

This component requires Stimulus. Keep --client so the controller is copied with the ViewComponent.

Terminal

bin/rails senren:add hover_card --client

Create a custom component with the same conventions

Use this when you need an app-specific component that follows Senren's ViewComponent and Stimulus structure. --client is required for this behavior.

Terminal

bin/rails generate senren:component hover_card --client

At a glance #

Category Overlays

Class name Senren::HoverCardComponent

Stimulus senren--hover-card

Variants default

Depends on —

Pairs with avatar, link

Source #

app/components/senren/hover_card_component.html.erb

<span data-controller="senren--hover-card" class="relative inline-block" data-senren-component="hover_card">
  <span tabindex="0"
        data-action="mouseenter->senren--hover-card#show mouseleave->senren--hover-card#hide focus->senren--hover-card#show blur->senren--hover-card#hide">
    <%= trigger %>
  </span>
  <span hidden data-senren--hover-card-target="panel"
        class="absolute z-40 mt-2 w-64 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-4 shadow-md">
    <%= content_panel || content %>
  </span>
</span>

app/components/senren/hover_card_component.rb

# frozen_string_literal: true

module Senren
  class HoverCardComponent < BaseComponent
    renders_one :trigger
    renders_one :content_panel

    VARIANTS = { default: '' }.freeze
    SIZES    = { md: '' }.freeze
  end
end

AI agent rules #

Use for

+user hover previews
+link previews

Avoid

-interactive forms - use popover or dialog

Accessibility #

Provide keyboard activation; do not block touch users.

Tooltip

Sheet