Thành phần

Hover Card

Hover card on Base UI PreviewCard: link trigger with the marker highlight, popover-style paper and 1px ink rule, opens on hover and focus.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Read the full record in the archive before you republish.

Install

bash

npx shadcn add @eloquent/hover-card

Usage

tsx

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";

<p>
  Read the full record in{" "}
  <HoverCard>
    <HoverCardTrigger href="/archive">the archive</HoverCardTrigger>
    <HoverCardContent>
      <span className="font-display text-lg font-black">The archive</span>
      <span className="font-serif text-sm">Every edition since the first.</span>
    </HoverCardContent>
  </HoverCard>{" "}
  before you republish.
</p>

The trigger is a link: give it a real href. The card is a preview, not the only place the content lives, because touch screens cannot hover. Keep buttons and links out of the card. delay and closeDelay are props of the trigger.

States

Opens below by default: editor’s note.

Opens above, with no delay: correction.

State	Treatment
Closed	Underlined link; the marker highlight sweeps under it on focus
Open	Paper, 1px ink rule, no arrow, no shadow; opacity fade
Focus	2px ink outline, 2px offset

Keyboard

Key	Action
Tab	Reach the link; the card opens on focus
Enter	Follow the link
Esc	Close the card; focus stays on the link

Vietnamese

Xem toàn bộ hồ sơ trong kho lưu trữ trước khi đăng lại.

Ink adaptation

As Popover. Upstream shadcn's shadow, radius and arrow are removed. The trigger is a link in prose, so it keeps the marker highlight (the one hover effect the brand allows on links); a hidden layer makes its hit area 44px high. Built on Base UI PreviewCard.