Hover Card

Rich content that opens on hovering or focusing the trigger, with configurable delays.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add hover-card --yes

The hover-card registry item installs these files:

app/components/ui_component.rb
app/components/ui/hover_card_component.rb
app/components/ui/hover_card/trigger_component.rb
app/components/ui/hover_card/content_component.rb
app/helpers/ui/hover_card_helper.rb
app/javascript/controllers/ui_hover_card_controller.js
vendor/shadwire/shadwire.css

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_hover_card do %>
  <%= ui_hover_card_trigger(href: "#") { "@shadwire" } %>
  <%= ui_hover_card_content { "Profile details." } %>
<% end %>

Examples

Default

A profile card shown on hover.

@shadwire

<%= ui_hover_card do %>
  <%= ui_hover_card_trigger(href: "#", class: "font-medium underline underline-offset-4") { "@shadwire" } %>
  <%= ui_hover_card_content do %>
    <div class="flex flex-col gap-1">
      <span class="text-sm font-semibold">Shadwire</span>
      <span class="text-sm text-muted-foreground">Rails components you install and then own.</span>
    </div>
  <% end %>

<%= ui_hover_card do %>
  <%= ui_hover_card_trigger(href: "#", class: "font-medium underline underline-offset-4") { "@shadwire" } %>
  <%= ui_hover_card_content do %>
    <div class="flex flex-col gap-1">
      <span class="text-sm font-semibold">Shadwire</span>
      <span class="text-sm text-muted-foreground">Rails components you install and then own.</span>
    </div>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`HoverCard`	`open_delay`	`700`	Milliseconds of hover or focus before it opens.
`HoverCard`	`close_delay`	`300`	Milliseconds before it closes once the pointer or focus leaves.
`HoverCard::Trigger`	`tag`	`:a`	The element to render; a link by default, so give it `href:`.
`HoverCard::Content`	`side`	`:bottom`	The edge it opens on: `:top`, `:right`, `:bottom` or `:left`.
`HoverCard::Content`	`align`	`:center`	Its alignment along that edge: `:start`, `:center` or `:end`.