Thẻ khi hover

Một cửa sổ xem trước nổi hiện ra khi di chuột qua — xem trước hồ sơ, xem trước liên kết, các thuật ngữ trong từ điển — với hiệu ứng viền và bóng theo phong cách tân thô mộc.

import {
  Avatar,
  AvatarFallback,

Hover card cho một panel nội dung xem trước đầy đủ nổi lên trên trang khi con trỏ dừng lại trên trigger — không cần bấm. Được xây dựng trên primitive Base UI Preview Card và tạo kiểu theo công thức neobrutalist: viền dày, bóng đổ đậm và kiểu chữ đậm.

Nên dùng khi:

Xem nhanh hồ sơ — trỏ vào một @mention hay ảnh đại diện để hiện phần giới thiệu, số liệu và nút theo dõi.
Xem trước liên kết — cho thấy tiêu đề và phần tóm tắt của trang trước khi người đọc quyết định bấm vào.
Thuật ngữ — giải thích từ chuyên môn ngay trong tài liệu mà không phải rời trang.

Cài đặt


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/hover-card.json
npx shadcn@latest add https://neobrutalism.com/r/base/hover-card.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/hover-card.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/hover-card.json

Cài đặt các phụ thuộc sau:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Sao chép và dán đoạn mã sau vào dự án của bạn.

components/ui/hover-card.tsx

"use client"

import * as React from "react"
import { HoverCard as HoverCardPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function HoverCard({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
}

function HoverCardTrigger({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
  return (
    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
  )
}

function HoverCardContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
  return (
    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
      <HoverCardPrimitive.Content
        data-slot="hover-card-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded border-2 bg-popover p-2.5 text-sm text-popover-foreground shadow-md outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
          className
        )}
        {...props}
      />
    </HoverCardPrimitive.Portal>
  )
}

export { HoverCard, HoverCardTrigger, HoverCardContent }

Cập nhật các đường dẫn import cho phù hợp với thiết lập dự án của bạn.

Cách dùng

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

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

Kết hợp

Dùng cách kết hợp sau để xây dựng một HoverCard:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Độ trễ kích hoạt

Dùng delay và closeDelay trên trigger để kiểm soát thời điểm thẻ mở và đóng.

<HoverCard>
  <HoverCardTrigger delay={100} closeDelay={200}>
    Hover
  </HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>

Định vị

Dùng các prop side và align trên HoverCardContent để kiểm soát vị trí.

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    Content
  </HoverCardContent>
</HoverCard>

Ví dụ

Cơ bản

import {
  Avatar,
  AvatarFallback,

Các cạnh

import { Button } from "@/components/ui/button"
import {
  HoverCard,

RTL

Để bật hỗ trợ RTL trong Neobrutalism, hãy xem hướng dẫn cấu hình RTL.

"use client"

import {

Khả năng truy cập

Hover card không có mẫu WAI-ARIA riêng — thứ gần nhất là mẫu Tooltip. Primitive của Base UI mở card khi trigger nhận focus từ bàn phím và đóng lại bằng Escape. Dù vậy, hãy coi nội dung bên trong là thông tin bổ trợ cho người dùng nhìn thấy được, và giữ cho trigger là một liên kết thật để toàn bộ nội dung vẫn tiếp cận được ở trang đích.

Tương tác bàn phím:

Phím	Hành động
`Tab` / `Shift + Tab`	Chuyển focus đến trigger — nhận focus thì card mở ra, rời đi thì card đóng
`Escape`	Đóng card
`Enter`	Đi theo liên kết của trigger

Tham chiếu API

Xem tài liệu Base UI để biết thêm thông tin.