@ark-ui/react/hover-card + Tailwind CSS v4

Ark Hover Card

Thành phần Hover Card xem trước ngữ cảnh tương tác cao được xây dựng trên nền tảng máy trạng thái Ark UI (Zag.js engine) và tạo kiểu toàn diện với Tailwind CSS v4. Hỗ trợ chuẩn WAI-ARIA, định vị thông minh Floating UI, mũi tên định hướng đồng bộ, cho phép người dùng di chuột trực tiếp vào bên trong để thao tác và cung cấp cả hai phong cách: Tiện ích cấp cao (Convenience API) và Cấu trúc ghép nối linh hoạt (Compound Component API).

1. Cơ bản (Basic Usage)

Sử dụng cú pháp tiện ích cấp cao để hiển thị thẻ xem trước khi người dùng rê chuột hoặc focus vào liên kết/phần tử.

Dự án được khởi tạo và dẫn dắt bởi @sarah_chen
cùng với đội ngũ thiết kế giao diện ChillCMS.

2. Kích thước (Sizes)

Cung cấp 5 kích thước chuẩn: sm (w-64), md (w-80, mặc định), lg (w-96), xl (w-112) và auto (tự co giãn).

3. Biến thể phong cách (Variants)

Đa dạng biến thể bề mặt: default, subtle, elevated, glass (hiệu ứng kính mờ) và solid (nền tối luxury).

4. Vị trí hiển thị (Placements)

Tùy chọn 8 hướng neo vị trí khác nhau kèm thuật toán tự động tránh tràn viền màn hình (Flip & Shift).

5. Mũi tên chỉ hướng (With & Without Arrow)

Tùy chọn hiển thị mũi tên định hướng (hasArrow: true/false) đồng bộ màu nền và viền chuẩn xác.

6. Độ trễ đóng mở (Custom Delays)

Điều chỉnh openDelay và closeDelay để tối ưu trải nghiệm, tránh mở ngoài ý muốn khi rê chuột lướt qua.

7. Hồ sơ người dùng nâng cao (User Profile)

Xem trước hồ sơ mạng xã hội hoàn chỉnh với ảnh đại diện, huy hiệu xác minh, thống kê bài viết và nút theo dõi.

Rê chuột vào thẻ tác giả bài viết để xem hồ sơ chi tiết:

Alex Rivera

Alex Rivera

@alexrivera

8. Xem trước liên kết (Link Preview - OpenGraph)

Thẻ xem trước bài viết với hình ảnh thumbnail, tiêu đề bài viết, tóm tắt và thời gian đọc.

Để tìm hiểu sâu hơn về kiến trúc tối ưu hóa hiệu năng render, hãy tham khảo bài viết Tối ưu hóa hiệu năng React 19 và Tailwind CSS v4
được đăng tải trên ChillCMS Engineering Blog.

9. Xem trước sản phẩm E-commerce (Product Preview)

Hiển thị thông tin sản phẩm mua sắm nhanh: ảnh, nhãn giảm giá, đánh giá sao và nút thêm vào giỏ.

Trong đơn hàng vừa đặt có sản phẩm Nike Air Max Pulse
đang trong giai đoạn đóng gói và chuẩn bị giao hàng.

10. Điều khiển trạng thái (Controlled Mode)

Quản lý việc mở/đóng thẻ từ bên ngoài bằng React State kết hợp thuộc tính open và sự kiện onOpenChange.

Trạng thái hiện tại: ĐÓNG (false)
Bạn cũng có thể rê chuột vào phần tử bên dưới hoặc bấm nút phía trên để điều khiển: Phần tử được kiểm soát

11. Chia sẻ Hover Card qua nhiều Triggers (Multiple Triggers)

Nhiều avatar kích hoạt dùng chung 1 instance HoverCard duy nhất. Thẻ chuyển vị trí tức thì mượt mà.

Rê chuột liên tục qua các thành viên bên dưới. Thẻ định vị lại tức thì mà không bị chớp giật hay đóng mở lại:

4 cộng tác viên cốt lõi

12. Cấu trúc ghép nối (Compound Component API)

Kiểm soát chi tiết từng phần của thẻ thông qua ArkHoverCard.Root, Trigger, Positioner, Content, Header, Body, Footer.

Sử dụng cấu trúc Compound Component (`ArkHoverCard.Root`, `Trigger`, `Content`, `Header`, `Body`, `Footer`):

13. Nội dung tương tác phong phú (Interactive Actions)

Cho phép người dùng tương tác trực tiếp với các phần tử bên trong thẻ như sao chép lệnh terminal, lưu bookmark hoặc mở liên kết ngoài mà thẻ không bị tự đóng.

Thẻ có thể chứa các phần tử tương tác đầy đủ (nút bấm, sao chép mã, chuyển đổi trạng thái): chakra-ui/ark
© 2026. FlatVn All rights reserved. Version 4.3.40