Tooltips trong Material 3 Jetpack Compose: nhỏ nhưng rất “có võ”

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:

1. Wrapper (TooltipBox, PlainTooltipBox, RichTooltipBox)
2. 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.