Hover Card

For sighted users to preview content available behind a link.

Preview Code
Interactive

Features

  • Can be controlled or uncontrolled.
  • Customize side, alignment, offsets, collision handling.
  • Optionally render a pointing arrow.
  • Supports custom open and close delays.
  • Ignored by screen readers.

Installation

Install the component from your command line.

Angular CLInpmpnpmyarnbun
Bash
ng g @ng-cn/core:c hover-card

Anatomy

Import all parts and piece them together.

Typescript
import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent
} from '@/ui/hover-card';
Html
<HoverCard>
  <HoverCardTrigger />
  <HoverCardContent />
</HoverCard>

API Reference

Root

Contains all the parts of a hover card.

PropTypeDefault
open boolean —
The controlled open state of the hover card.
defaultOpen boolean false
The open state of the hover card when initially rendered.
openDelay number 700
The duration from when the mouse enters the trigger until the hover card opens.
closeDelay number 300
The duration from when the mouse leaves the trigger until the hover card closes.

Trigger

The link that opens the hover card when hovered.

PropTypeDefault
asChild boolean false
Change the component to render as the child element.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"open" | "closed"

Content

The component that pops out when the hover card is open.

PropTypeDefault
side 'top' | 'right' | 'bottom' | 'left' 'bottom'
The preferred side of the trigger to render against when open.
sideOffset number 4
The distance in pixels from the trigger.
align 'start' | 'center' | 'end' 'center'
The preferred alignment against the trigger.
alignOffset number 0
An offset in pixels from the alignment options.
avoidCollisions boolean true
When true, overrides the side and align preferences to prevent collisions.
forceMount boolean —
Used to force mounting when more control is needed.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"open" | "closed"
[data-side]"top" | "right" | "bottom" | "left"
[data-align]"start" | "center" | "end"

Examples

Basic

A hover card showing user information.

Html
<HoverCard>
  <HoverCardTrigger>
    <a href="#" class="underline">&#64;shadcn</a>
  </HoverCardTrigger>
  <HoverCardContent class="w-80">
    <div class="flex justify-between space-x-4">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" />
        <AvatarFallback>SC</AvatarFallback>
      </Avatar>
      <div class="space-y-1">
        <h4 class="text-sm font-semibold">&#64;shadcn</h4>
        <p class="text-sm">
          The creator of shadcn/ui – beautifully designed components.
        </p>
        <div class="flex items-center pt-2">
          <lucide-icon [img]="CalendarIcon" class="mr-2 h-4 w-4 opacity-70" />
          <span class="text-xs text-muted-foreground">
            Joined December 2021
          </span>
        </div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

With custom delays

Customize the open and close delays.

Html
<HoverCard [openDelay]="200" [closeDelay]="500">
  <HoverCardTrigger>
    <a href="#" class="underline">Quick open, slow close</a>
  </HoverCardTrigger>
  <HoverCardContent>
    Opens quickly, closes slowly.
  </HoverCardContent>
</HoverCard>

Positioning

Position the hover card on different sides.

Html
<div class="flex gap-8">
  <HoverCard>
    <HoverCardTrigger><a href="#">Top</a></HoverCardTrigger>
    <HoverCardContent side="top">Top content</HoverCardContent>
  </HoverCard>

  <HoverCard>
    <HoverCardTrigger><a href="#">Right</a></HoverCardTrigger>
    <HoverCardContent side="right">Right content</HoverCardContent>
  </HoverCard>
</div>

Controlled

Control the open state programmatically.

Html
// In your component:
isOpen = signal(false);

// In template:
<HoverCard [open]="isOpen()" (openChange)="isOpen.set($event)">
  <HoverCardTrigger>
    <a href="#">Controlled hover card</a>
  </HoverCardTrigger>
  <HoverCardContent>
    Controlled content
  </HoverCardContent>
</HoverCard>

Accessibility

Adheres to the Supplementary content pattern .

Keyboard Interactions

KeyDescription
Tab Moves focus to the trigger element.
Enter Activates the link if trigger is a link.