Hover Card

Hover cards preview rich content behind a link or control on hover or focus — profiles, link previews, and other supplementary detail.

Try it

Usage

Compose a trigger and content surface. Tune delay and closeDelay so pointer movement can reach interactive content inside the card.

import {
  RuiHoverCard,
  RuiHoverCardContent,
  RuiHoverCardTrigger,
} from '@ecopages/radiant-ui/hover-card';
import { RuiAvatar } from '@ecopages/radiant-ui/avatar';
import { RuiButton } from '@ecopages/radiant-ui/button';
 
<RuiHoverCard delay={600} closeDelay={200} placement="bottom-start">
  <RuiHoverCardTrigger>
    <RuiButton variant="link">Jane Cooper</RuiButton>
  </RuiHoverCardTrigger>
  <RuiHoverCardContent>
    <div class="flex gap-3">
      <RuiAvatar fallback="JC" alt="Jane Cooper" />
      <div class="flex flex-col gap-1">
        <p class="font-medium text-sm">Jane Cooper</p>
        <p class="text-on-surface text-xs opacity-80">Product designer on the Radiant team.</p>
      </div>
    </div>
  </RuiHoverCardContent>
</RuiHoverCard>Copy

Custom markup

<rui-hover-card> coordinates any light-DOM tree that matches its query contract. The Rui* helpers stamp these targets; they are not required.

import '@ecopages/radiant-ui/hover-card';
 
<rui-hover-card delay={600} content-label="Jane Cooper preview">
  <span class="rui-hover-card">
    <span class="rui-hover-card__trigger" data-ref="trigger">
      <span data-hover-card-trigger>
        <button type="button">Jane Cooper</button>
      </span>
    </span>
    <div data-ref="content" class="rui-hover-card__content rui-floating" role="dialog">
      <p>Product designer on the Radiant team.</p>
    </div>
  </span>
</rui-hover-card>;Copy

The host queries [data-ref="trigger"] for focus events and [data-hover-card-trigger] for the anchor.

Hover card vs tooltip

Use RuiTooltip for short, non-interactive descriptions. Use RuiHoverCard when the preview includes links, avatars, or other focusable content.

Theming

The preview panel is often portaled; override --rui-hover-card-* on .rui-hover-card__content.

.rui-hover-card__content {
  --rui-hover-card-width: 24rem;
}Copy

Accessibility

• The same information should remain available without hover (for example via navigation to a full profile page).
• The preview dialog has a default accessible name (Preview). Override with content-label when needed.
• Keyboard users can Tab into card content while it is open.
• Press Escape to dismiss.

API

RuiHoverCard is a custom element (<rui-hover-card>) that shows a floating preview on hover or focus of its trigger.

Attributes (<rui-hover-card>)

Light-DOM contract

Do not set aria-controls, aria-expanded, or aria-label on the surface. Nested hosts: none.

Events

Methods

View helpers

CSS classes