HoverCard

Code

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@fadymondy/nasaq/web";export function Mention() {  return (    <HoverCard>      <HoverCardTrigger render={<a href="/people/sara" />}>@sara</HoverCardTrigger>      <HoverCardContent>        <p className="text-body-sm font-semibold">Sara Al-Harbi</p>        <p className="text-caption text-muted-foreground">Design lead</p>      </HoverCardContent>    </HoverCard>  );}

Overlays · stable

Live examples and controls: HoverCard in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/hover-card.json

A floating card that previews the destination of a link (a user profile, an issue summary) while the pointer rests on it or the link has keyboard focus. Built on Base UI PreviewCard. The preview is a convenience only: the trigger must be a real link that works without it.

When to useCopy Anchor Link

• Previewing a linked entity (person, issue, repo) inline in text.

When not to useCopy Anchor Link

• Content people must reach on touch or that holds actions: use a Popover.
• A short label: use a Tooltip.

ImportCopy Anchor Link

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@fadymondy/nasaq/web";

export function Mention() {
  return (
    <HoverCard>
      <HoverCardTrigger render={<a href="/people/sara" />}>@sara</HoverCardTrigger>
      <HoverCardContent>
        <p className="text-body-sm font-semibold">Sara Al-Harbi</p>
        <p className="text-caption text-muted-foreground">Design lead</p>
      </HoverCardContent>
    </HoverCard>
  );
}

AnatomyCopy Anchor Link

HoverCard                 Base UI PreviewCard.Root
├─ HoverCardTrigger       Base UI PreviewCard.Trigger (an <a>; use render={<a href />})
└─ HoverCardContent       Portal + positioner + popup   data-slot="hover-card-content"

APICopy Anchor Link

HoverCard = PreviewCard.Root, HoverCardTrigger = PreviewCard.Trigger.

HoverCardContentCopy Anchor Link

HoverCardContentProps extends Base UI PreviewCard.Popup props.

ExamplesCopy Anchor Link

Faster open, ArabicCopy Anchor Link

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@fadymondy/nasaq/web";

export function MentionAr() {
  return (
    <p dir="rtl" lang="ar">
      أُسندت إلى{" "}
      <HoverCard>
        <HoverCardTrigger delay={200} render={<a href="/people/sara" />}>@سارة</HoverCardTrigger>
        <HoverCardContent align="start">
          <p className="text-body-sm font-semibold">سارة الحربي</p>
          <p className="text-caption text-muted-foreground">مسؤولة التصميم</p>
        </HoverCardContent>
      </HoverCard>
    </p>
  );
}

AccessibilityCopy Anchor Link

The card opens on pointer hover and on keyboard focus of the trigger, and closes on blur, pointer leave and Esc. It is hidden from touch and is not announced as a dialog, so never put the only route to information or an action in it.

• The trigger must be a real link with meaningful text.
• Localise all card copy.

RTL & i18nCopy Anchor Link

• Placement follows dir; prefer inline-* sides and align="start".
• No built-in strings.

Styling & tokensCopy Anchor Link

• Same surface as Popover: bg-popover, border-border, rounded-floating, shadow-floating.
• State attributes: data-starting-style, data-ending-style, data-side.
• Extend with className; no raw hex.

Do / Don'tCopy Anchor Link

• Do keep the card read-only and small.
• Don't put buttons or forms in it; use a Popover.
• Don't rely on it for information needed on touch.

RelatedCopy Anchor Link

• Popover · Tooltip · Avatar

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-overlays-hover-card--docs