Hover Card

Delayed hover previews for links and actions with configurable timing, positioning, styling, and RTL support.

01 Hero Preview

Grid: 8px · Scale: 1:1

02 Usage

import { FrAvatarModule } from '@frame-ui-ng/components/avatar';
import { FrButtonModule } from '@frame-ui-ng/components/button';
import { FrHoverCardModule } from '@frame-ui-ng/components/hover-card';

HTML

<frame-hover-card>
  <button frButton appearance="ghost" [frHoverCardTrigger]="card" type="button">
    @angular
  </button>

  <ng-template #card="frHoverCardContent" frHoverCardContent side="bottom" align="center">
    <div frHoverCardPanel>
      <div class="flex gap-3">
        <span frAvatar>
          <span frAvatarFallback>NG</span>
        </span>
        <div>
          <p class="frame-hover-card__title">@angular</p>
          <p class="frame-hover-card__description">
            The web development framework for building modern applications.
          </p>
          <p class="frame-hover-card__meta">Joined January 2010</p>
        </div>
      </div>
    </div>
  </ng-template>
</frame-hover-card>

03 Examples

Basic

A basic hover card that previews content behind a trigger.

Component Sheet

Grid: 8px · Scale: 1:1

Trigger Delays

Use `openDelay` and `closeDelay` on the root to control hover timing.

Component Sheet

Grid: 8px · Scale: 1:1

Positioning

Use `side`, `align`, `sideOffset`, and `alignOffset` to place the card on any side of the trigger.

Component Sheet

Grid: 8px · Scale: 1:1

Custom Styling

Override hover-card tokens from the trigger tree to customize the overlay panel.

Component Sheet

Grid: 8px · Scale: 1:1

RTL

Hover cards inherit text direction from their surrounding context.

Component Sheet

Grid: 8px · Scale: 1:1

05 Token Inspector

Inspect the hover card surface, title, description, and supporting metadata.

06 Design Tokens

Hover card tokens style the floating content shell and common text affordances while leaving nested primitives such as Avatar and Button to their own token contracts.

SCSS


  --frame-hover-card-content-width: 20rem;
  --frame-hover-card-content-padding: 1rem;
  --frame-hover-card-content-radius: var(--frame-radius-md);
  --frame-hover-card-content-bg: var(--frame-surface);
  --frame-hover-card-content-color: var(--frame-surface-foreground);
  --frame-hover-card-content-border: var(--frame-border);
  --frame-hover-card-content-shadow: var(--frame-shadow-md);
  --frame-hover-card-content-gap: 0.75rem;
  --frame-hover-card-title-color: var(--frame-foreground);
  --frame-hover-card-title-font-size: 0.875rem;
  --frame-hover-card-title-font-weight: 600;
  --frame-hover-card-description-color: var(--frame-muted-foreground);
  --frame-hover-card-description-font-size: 0.875rem;
  --frame-hover-card-meta-color: var(--frame-muted-foreground);
  --frame-hover-card-meta-font-size: 0.75rem;
  --frame-hover-card-motion-duration: 140ms;
  --frame-hover-card-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --frame-hover-card-motion-distance: 0.25rem;
  --frame-hover-card-motion-scale: 0.96;