Tooltip là một trong những UI component nhỏ nhưng mang lại trải nghiệm rất tốt nếu dùng đúng cách.
Trong Jetpack Compose với Material 3, tooltip đã được hỗ trợ chính thức, giúp bạn dễ dàng cung cấp thêm ngữ cảnh cho UI mà không làm rối layout.
Tooltip trong Compose là gì?
Tooltip là một thành phần UI hiển thị thông tin ngắn gọn khi người dùng:
- Hover (desktop)
- Long press (mobile)
Material 3 trong Compose cung cấp sẵn các loại tooltip để bạn sử dụng trực tiếp thay vì phải tự build như trước. :contentReference[oaicite:0]{index=0}
Các loại Tooltip trong Material 3
Có 2 loại chính:
1. Plain Tooltip
Dùng cho mô tả ngắn, đơn giản:
- Label cho icon
- Giải thích nhanh chức năng
PlainTooltipBox(
tooltip = { Text("Add to favorites") }
) {
IconButton(
onClick = {},
modifier = Modifier.tooltipTrigger()
) {
Icon(Icons.Default.Favorite, contentDescription = null)
}
}
Đặc điểm:
- Nhẹ
- Hiển thị nhanh
- Không có nhiều tương tác
2. Rich Tooltip
Dùng khi cần nội dung chi tiết hơn:
- Có title
- Có description
- Có thể có action
RichTooltipBox(
title = { Text("Title") },
text = { Text("More detailed explanation here") }
) {
IconButton(
onClick = {},
modifier = Modifier.tooltipTrigger()
) {
Icon(Icons.Default.Info, contentDescription = null)
}
}
Đặc điểm:
- Nội dung phong phú hơn
- Có thể chứa nhiều thông tin
- Phù hợp onboarding hoặc hướng dẫn
Cách hoạt động của Tooltip
Để tooltip hoạt động, bạn cần 2 phần:
- Wrapper (
TooltipBox,PlainTooltipBox,RichTooltipBox) - Anchor (
Modifier.tooltipTrigger()hoặc tương đương)
👉 Tooltip sẽ gắn vào anchor và tự xử lý vị trí hiển thị. ([BoltUiX][1])
Tùy chỉnh vị trí Tooltip
Material 3 cho phép bạn kiểm soát vị trí hiển thị:
- Trên (top)
- Dưới (bottom)
- Trái / phải
Bạn có thể dùng:
TooltipDefaults.rememberPlainTooltipPositionProvider()
Hoặc custom position nếu cần layout đặc biệt. ([BoltUiX][1])
Khi nào nên dùng Tooltip?
Tooltip phù hợp khi:
- UI có icon không rõ nghĩa
- Không muốn thêm text trực tiếp vào layout
- Cần cung cấp hint nhanh cho user
Không nên dùng khi:
- Nội dung quá dài
- Thông tin quan trọng (user có thể bỏ lỡ)
Một số lưu ý quan trọng
- Tooltip không thay thế label chính
- Không nên phụ thuộc hoàn toàn vào tooltip
- Trên mobile, user phải long press → UX cần cân nhắc
Một insight đáng chú ý
Trước đây:
- Compose không có tooltip chính thức
- Dev phải tự build hoặc dùng workaround
Hiện tại:
- Material 3 đã cung cấp sẵn API
- Dễ dùng hơn nhiều
- Consistent với design system
Tổng kết
Tooltip trong Compose Material 3:
- Dễ dùng
- Có sẵn nhiều loại
- Hỗ trợ custom vị trí
Nếu dùng đúng:
- UI gọn hơn
- UX rõ ràng hơn
- Không cần nhồi nhét quá nhiều text
Kết luận
Tooltip không phải là component lớn.
Nhưng nếu dùng đúng chỗ, nó giúp app của bạn “tinh tế” hơn rất nhiều.
