English
Vietnamese@ark-ui/react/tooltip + Tailwind CSS v4
Ark Tooltip
Thành phần Tooltip chú thích ngữ cảnh được phát triển dựa trên máy trạng thái của 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, tính toán vị trí thông minh với Floating UI, mũi tên định hướng đồng bộ màu sắc, chuyển cảnh mượt mà và cung cấp cả hai phong cách sử dụng: Cấp cao (Convenience API) và Ghép nối linh hoạt (Compound API).
1. Cơ bản (Basic Usage)
Sử dụng cú pháp tiện ích cấp cao để gắn tooltip vào bất kỳ phần tử nào khi hover hoặc focus.
Đây là tooltip cơ bản được kích hoạt khi hover hoặc focus
Thao tác làm mới dữ liệu
2. Kích thước (Sizes)
Hỗ trợ 4 kích thước chuẩn từ siêu nhỏ gọn đến rộng rãi: xs, sm, md (mặc định) và lg.
Tooltip siêu nhỏ gọn (xs)
Tooltip cỡ nhỏ (sm)
Tooltip tiêu chuẩn (md)
Tooltip cỡ lớn với khoảng cách rộng (lg)
3. Biến thể màu sắc & phong cách (Variants)
Đa dạng phong cách trực quan từ solid, subtle, outline, glass mờ ảo đến các màu ngữ cảnh primary, success, warning, error, info.
Mặc định: độ tương phản cao, tối giản
Màu nền surface nhẹ nhàng cùng viền border
Viền dày nổi bật cho thiết kế kỹ thuật
Hiệu ứng kính mờ thời thượng với backdrop-blur
Tông màu chính của hệ thống thương hiệu
Thông báo trạng thái thành công
Cảnh báo cần lưu ý
Báo lỗi hoặc thao tác phá hủy
Thông tin chú thích hữu ích
4. Vị trí hiển thị (Placements)
Lựa chọn 8 hướng neo vị trí khác nhau so với phần tử kích hoạt với cơ chế tránh va chạm viền màn hình tự động.
Đang hiển thị ở vị trí: top
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) với đường viền và màu nền đồng bộ chính xác.
Tooltip có mũi tên định hướng tự động
Tooltip không có mũi tên, thiết kế tối giản phẳng
Biến thể Subtle kết hợp mũi tên viền đồng bộ
6. Độ trễ đóng mở (Custom Delays)
Tùy chỉnh thời gian chờ trước khi mở (openDelay) hoặc trước khi đóng (closeDelay) để tối ưu trải nghiệm.
Mở ngay tức thì không có độ trễ (0ms)
Độ trễ mở mặc định thân thiện với người dùng (150ms)
Độ trễ lâu tránh hiện tooltip ngoài ý muốn khi lướt chuột qua (600ms)
7. Nội dung tương tác (Interactive Tooltip)
Cho phép người dùng rê chuột trực tiếp vào bên trong tooltip để click liên kết hoặc thao tác mà không bị tự đóng.
Nội dung tương tác được
Bạn có thể di chuột vào bên trong khung tooltip này để nhấn liên kết hoặc nút bấm.
8. Nội dung phong phú & Phím tắt (Rich Content)
Nhúng biểu tượng, tiêu đề phân cấp, mô tả phụ và phím tắt kbd trực quan bên trong tooltip.
Lưu bản thảo⌘ + S
Tự động đồng bộ với hệ thống lưu trữ đám mây
Sao chép vào clipboardCtrl + C
9. Điều khiển trạng thái (Controlled Mode)
Quản lý việc hiển thị tooltip từ bên ngoài thông qua React State với prop open và sự kiện onOpenChange.
Trạng thái hiện tại: ĐANG ĐÓNG
Trạng thái mở/đóng này được điều khiển hoàn toàn bởi React State bên ngoài
10. Thanh công cụ chia sẻ Tooltip (Multiple Triggers)
Ark UI cho phép nhiều trigger dùng chung một instance Tooltip. Di chuyển qua lại mượt mà tức thì không bị chớp giật.
Di chuyển chuột giữa các nút trên thanh công cụ để trải nghiệm chuyển tiếp mượt mà không nhấp nháy:
11. Cấu trúc ghép nối (Compound Component API)
Sử dụng trực tiếp ArkTooltip.Root, ArkTooltip.Trigger, ArkTooltip.Positioner, ArkTooltip.Content để kiểm soát tối đa.
Cấu hình hệ thốngTự do tùy biến từng phần tử DOM với Compound API
12. Tích hợp UI (Avatars, Badges, Disabled Elements)
Gắn tooltip cho hình đại diện, huy hiệu trạng thái, nút xóa nguy hiểm và nút bị disable (hỗ trợ accessibility).
Hồ sơ quản trị viên: Nguyễn Văn A (Online)
Hệ thống đã được xác minh chứng chỉ an toàn SSL/TLS
Xóa vĩnh viễn mục này khỏi thùng rác
Bạn không có quyền quản trị để thực hiện tính năng này