Tooltip
Tooltip hiển thị thông tin bổ sung ngắn gọn khi người dùng hover hoặc focus vào một phần tử.
Đặc biệt cần cho Button chỉ có icon. Bao ứng dụng bằng <TooltipProvider> một lần ở gốc.
Import
Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.
TSX
// npm install yugen-uiimport { SimpleTooltip, Tooltip, TooltipTrigger, TooltipContent } from "yugen-ui";Biến thể
Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.
Vị trí
side: top (mặc định), right, bottom, left.
Không mũi tên
withArrow={false} khi tooltip nằm sát phần tử nhỏ.
Cách dùng
Nên
- Nội dung tooltip ngắn, không quá một câu.
- Luôn thêm tooltip cho Button chỉ có icon.
Không nên
- Không đặt link/nút trong tooltip — dùng Popover.
- Không giấu thông tin quan trọng chỉ trong tooltip.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| contentReactNode | Mặc định: — | (SimpleTooltip) Nội dung. |
| appearance"normal" | "inverted" | Mặc định: "normal" | Nền sáng hoặc đảo màu. |
| side"top" | "right" | "bottom" | "left" | Mặc định: "top" | Vị trí so với trigger. |
| withArrowboolean | Mặc định: true | Hiện mũi tên. |
| material"glass" | "glass-clear" | Mặc định: — | Yugen Labs — tooltip bằng glass. |