RRenDSv0.14.1
GitHubGet started

Composite

Hover Card Requires JS

A rich preview that appears when the user hovers over a link or avatar. Think Twitter / GitHub profile cards on hover. Larger and more leisurely than a Tooltip; doesn't trap focus like a Popover.

About

Overview

Hover cards show a peek of related content without forcing the user to navigate. Use them on user mentions, tags, internal links — anywhere a quick preview helps. They're voluntary previews, not modals; they shouldn't carry actions the user has to take.

Tooltip vs Hover Card. Tooltip is text-only and small (a label, a shortcut). Hover Card is rich content with images and structure, sized like a small popover.

Live

Demo

The component waits 200 ms of hover before showing, and keeps the card up for 300 ms after the cursor leaves so it can travel into the card. Two mentions share the sentence on purpose: each card must open against its own link, never against the last trigger on the page.

Hover either mention: @ren and @lu shipped this design system.

<p>… <a href="/users/ren" id="ren-mention">@ren</a> shipped this.</p>

<ren-hover-card data-hover-trigger="#ren-mention">
  <div class="ren-hover-card" role="tooltip">
    <div class="ren-hover-card-header">
      <h3>Ren Soconese</h3>
      <p>Designer · Buenos Aires</p>
    </div>
    <div class="ren-hover-card-body">Joined March 2024 · 142 projects</div>
  </div>
</ren-hover-card>

Reference

API

ClassEffect
.ren-hover-cardThe floating panel, written as a real element inside <ren-hover-card>. Card-like surface with shadow and padding.
.ren-hover-card-header / -body / -footerThe three content slots. The header holds the accessible heading (<h3> or <h4>).
.ren-hover-card-sm / -lgNarrower / wider panel.

Web Component attributes

AttributeTypeDefaultNotes
show-delaynumber (ms)200Hover dwell before showing. Keyboard focus shows the card immediately.
hide-delaynumber (ms)300Time after the cursor leaves both trigger and card before closing — gives the user a moment to move into the card.
data-hover-triggerCSS selectorprevious siblingPoints the card at a remote trigger. Without it the component uses the element immediately before the host.

Placement comes from CSS anchor positioning (position-area: bottom span-all with a flip fallback), not from an attribute. The anchor name is generated per instance, so several cards on one page each track their own trigger.

Inclusive by default

Accessibility

  • Trigger must be a real link or button. Focusing it via Tab also opens the card (not just hover).
  • The component wires aria-describedby from the trigger to the role="tooltip" card (generating an id if the card has none), so the preview is announced on focus even for users who never see it painted. It deliberately does not set aria-haspopup: the allowed values are false | true | menu | listbox | tree | grid | dialog, and a hover card is none of them.
  • Card content is supplementary — never put critical information here. Touch users won't see it.
  • If the card contains links or actions, those should ALSO live somewhere reachable — on the linked profile page, in a menu.
  • The card is a popover="manual" surface, so it is not light-dismissed by Esc: moving focus off the trigger (Tab) or the pointer away from both trigger and card is what closes it.